CSS选择器不起作用答案

【问题标题】：Css selector is not workingCSS选择器不起作用
【发布时间】：2014-09-05 10:46:35
【问题描述】：

我在通过 CSS 选择器从 CSS 调用 html 元素时遇到问题。奇怪的是，类选择器正在工作，但我无法从 CSS 中选择元素。所以我不得不给他们上课。

我想做的是；当鼠标悬停在我希望出现 <ul> 时，当鼠标不悬停时 <a>, 我希望 <ul>（菜单）消失。

HTML：

<div id="cFilter">
           <a href="#" class="menus">Sort by date</a>
           <ul class="uls">
               <li class="lis">From old to new</li>
               <li class="lis">From new to old</li>
           </ul>

</div>

CSS：

.menus {
    color:#2a2d4d;
    float:left;
    margin-left:13px;
    margin-top:20px;
    text-decoration:none;
    text-align:center;
    background-color:#ffd800;
    width:200px;
    height:40px;
    position:relative; 
    z-index:9999;

}
    .menus:hover > ul{
   color:#4d78bd;
   cursor:pointer;
   display:block;
         }
.uls {
   display:none; 
    background-color:#808080;
    width:150px;
    height:60px;
    margin-top:60px;
    list-style-type:none;float:left;
    position: absolute;
    margin-left: 14px;
    margin-bottom:-100px;
}
.lis:hover {
color:#eedede;
cursor:pointer;
}

这是我的小提琴：JSFiddle

希望有人可以帮助我..

【问题讨论】：

小提琴链接不起作用
请在您的问题中发布您的代码，不要指望我们为了帮助您而在互联网上闲逛。
@punithasubramaniv 它的工作
我很抱歉，但我只是认为人们会向我要小提琴并认为这样会更容易。我无意欺骗任何人.. @DavidThomas
人们不可避免地会要求 JS Fiddle 演示，但这不是必需的（尽管它非常有用）；但是，相关代码是代码本身是否存在问题。

标签： html css css-selectors

【解决方案1】：

这是因为你使用了错误的选择器：

.menus:hover > ul {

> 是直接子选择器。而且您的ul 不是您的a.menus 的孩子。他们是兄弟姐妹，所以您必须使用 + 来表示直接兄弟姐妹，或使用 ~ 来表示一般兄弟姐妹：

.menus:hover ~ ul {

http://jsfiddle.net/rdLjkt64/2/

【讨论】：

【解决方案2】：

试试这样的方法

.menus:hover + .uls
{
   color:#4d78bd;
   cursor:pointer;
   display:block;
}

或

.menus:hover + ul
{
   color:#4d78bd;
   cursor:pointer;
   display:block;
}

DEMO

【讨论】：

【解决方案3】：

加加号

.menus:hover > .uls

到

.menus:hover + .uls

【讨论】：

【解决方案4】：

这样试试

 .menus:hover ~.uls
 {
 color:#4d78bd;
 cursor:pointer;
 display:block;
 }

如果你想改用元素选择器

.menus:hover ~ ul
{
color:#4d78bd;
cursor:pointer;
display:block;
}

> 是直接子选择器，所以它不会因为 ul 不是子选择器而工作

Demo Fiddle

【讨论】：

【解决方案5】：

您试图在悬停前一个元素 () 时显示下一个元素 (

)。要实现这一点，请使用“+”选择器来影响下一个兄弟：

    .menus:hover + ul

代替您之前使用的子选择器 (>)。

    .menus:hover > ul

这是更新后的fiddle

但是，如果您通过鼠标输入，这会导致再次隐藏，因此将悬停的元素替换为其父元素并再次使用子选择器：

    #cFilter:hover > ul

喜欢这个fiddle

【讨论】：