CSS checked not working

Question

HTML Element:

<p> <input type="button"> id="edit" value="edit page" /> </p>

This div has been hidden with display:none , I want to toggle the visibility to display:normal.

@Html.EditorFor(
    modelItem => model.user, 
    new {
        htmlAttributes = new {
            @ class = "user" 
        } 
    } 
)

The class 'user' has the following properties:

.user {
    width:200px;
    margin-left:3px;
    display:none;
}

For some reason my checked CSS isn't working:

#edit:hover + user {
    color:black;
}

#edit:checked + user {
    display:normal;
}

JSFiddle Example : https://jsfiddle.net/gp7pyssu/

I don't want to use any Javascript to toggle visibility, I'd like it to be done in pure CSS3.

Answer 1

Several CSS issues here:

display value

In CSS, there is no normal value for display.

Use block, inline or another value that fits your needs : http://www.w3.org/wiki/CSS/Properties/display

+ selector

To use the + selector in your CSS, you have to have your div just after your input, so you have to remove the p surrounding the input: http://www.w3.org/wiki/CSS/Selectors/combinators/adjacent

:checked selector

The selector :checked is only available for radio and checkbox input, you can't use it with a button input: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:checked

---

With all that, you can check this working JSFiddle