CSS选择器悬停不起作用

悬停时，样式不会将显示更改为阻止。我将不胜感激任何评论。CSS选择器悬停不起作用

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="UTF-8"> 
    <title>CSS Selectors</title> 
    <style> 
     div ul li:hover> ul { 
      display:block; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <ul> 
      <li> List Item 
       <ul style="display:none;"> 
        <li> Child </li> 
       </ul> 
      </li> 
      <li> List Item </li> 
      <li> List Item </li> 
      <li> List Item </li> 
     </ul> 
    </div> 
</body> 
</html>

来源

2013-10-11 SƲmmēr Aƥ

这可能有助于http://css-tricks.com/hover- on-everything-but/ –

原因有三：

你不能在伪选择的空间。
嵌入式样式优先于嵌入式样式，所以即使您的选择器正确，display: block;也不起作用。
您正在选择ul，它是div的直接子元素，而设置为不显示的ul是div内的ul的子元素，因此不起作用。

尝试是这样的：

div ul ul { 
    display: none; 
} 
div:hover ul ul { 
    display:block; 
}

来源

2013-10-11 02:12:46

or avoid！！important and define that inner display：none like this'ul> li> ul {display：none}' –

这是一个更好的主意，我真的应该做到这一点开始。编辑我的答案，谢谢你指出。 –

你的CSS更改为

div ul li:hover{ 
    display:block; 
}

来源

2013-10-11 02:11:28

使用重要的display: block;

尝试

div ul li:hover > ul { 
    display:block!important; 
}

来源

2013-10-11 02:16:07

不要使用'！important'，除非你**真的**需要 – apaul

你的帖子也可能因为它的长度而触发了低质量的过滤器。 – apaul

CSS选择器悬停不起作用

回答

相关问题