Question

我在通过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

希望有人可以帮助我..

Answer 1

试试这个

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

如果您想使用元素选择器

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

> 是一个直接子选择器，所以它不会因为 ul 不是孩子而

Demo Fiddle

Answer 2

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

.menus:hover > ul {

>是直接子选择器。而且您的ul不是您a.menus的孩子。它们是sibilings，所以你必须使用+用于中级sibilings，或~用于一般sibilings：

.menus:hover ~ ul {

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

Answer 3

尝试这样的事情

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

或

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

<强> DEMO

Answer 4

添加加号

.menus:hover > .uls

到

.menus:hover + .uls

Answer 5

您正试图在悬停前一个元素（＆lt; a＆gt;）时显示下一个元素（＆lt; ul＆gt;）。要实现这一点，请使用“+”选择器来影响下一个兄弟：

    .menus:hover + ul

而不是之前使用的子选择器（＆gt;）。

    .menus:hover > ul

以下是更新后的fiddle

但是如果你用鼠标输入它会导致再次隐藏，所以用它的父替换悬停的元素并再次使用子选择器：

    #cFilter:hover > ul

就像这个fiddle

一样

Css选择器无法正常工作

5 个答案:

Demo Fiddle