html - CSS 检查不工作

Question

HTML 元素:

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

此 div 已使用 display:none 隐藏，我想将可见性切换为 display:normal。

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

“用户”类具有以下属性:

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

出于某种原因，我检查的 CSS 无法正常工作:

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

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

JSFiddle 示例:https://jsfiddle.net/gp7pyssu/

我不想使用任何 Javascript 来切换可见性，我希望它在纯 CSS3 中完成。

Answer 1

这里有几个 CSS 问题:

显示值

在 CSS 中，display 没有normal 值。

使用block、inline 或其他符合您需要的值:http://www.w3.org/wiki/CSS/Properties/display

+ 选择器

要在 CSS 中使用 + 选择器，您必须在 input 之后添加 div，因此您必须删除 p 包围 input:http://www.w3.org/wiki/CSS/Selectors/combinators/adjacent

:选中的选择器

选择器:checked只适用于radio和checkbox input，不能使用使用按钮 输入:http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:checked

---

综上所述，您可以查看此 working JSFiddle