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" 
        } 
    } 
)

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 中使用 + 选择器，您的 div 必须紧跟在 input 之后，因此您必须删除围绕 p input: http://www.w3.org/wiki/CSS/Selectors/combinators/adjacent

:选中选择器

选择器 :checked 仅适用于 radio 和 checkbox input，不能与 button input 一起使用]: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:checked

---

综上所述，您可以检查一下 working JSFiddle

Answer 2

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

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

看看