CSS on condition

Question

CSS 支持条件吗？我的意思是有悬停，所以当鼠标在上面时，元素样式会发生变化。我有display:none类".menu_top_line"，当鼠标在其他元素上时，我可以将其更改为"display:block"吗？喜欢：

nav ul li:hover
{
    background-color:#FFF;
    // other block.display:block
}

Answer 1

无法从规则集内部引用另一个元素。

如果可以编写与要操作的元素匹配的选择器，该选择器也引用要悬停的元素，则可以将:hover应用于选择器中的该元素。

nav ul li:hover > .menu_top_line {
    display: block;
} 

否则你需要JavaScript。

Answer 2

您可以为子元素、后代或紧邻的同级元素执行此操作。

您可以使用 ( > ( 运算符为后代元素选择任何直接子元素space( )，为紧邻的下一个同级元素选择 ( + ( 运算符。

让我向您展示类似于@Quentin给出的答案的兄弟姐妹选择，即仅适用于儿童选择。

nav ul li:hover + .menu_top_line {
    display: block;
}

这将使用类 menu_top_line 处理这些元素，该类 后面的li是nav元素的子元素的ul。

因此，有3种方法可以实现您想要的。

Answer 3

这是

可能的，但前提是您针对"鼠标在某个其他元素上"条件的元素是您按住鼠标的元素的某个子级(或孙级(。

ul li a {
    /* normal */
}
ul:hover li a {
    /* a's style when the mouse is over the ul */
}