下拉内容悬停

这是我的HTML下拉内容悬停

<header class='lap-12 row'> 
    <div class="lap-2 center"> 
     <a href="#"><img src="logo-desktop.png" alt="logo-desktop"></a> 
    </div> 
    <div class="lap-8 center space-around"> 
     <a id='velos' href="#"><b>VELOS</b></a> 
     <a href="#"><b>PRODUITS</b></a> 
     <a href="#">LA MARQUE</a> 
     <a href="#">CONSEILS</a> 
     <a href="#">GARANTIE À VIE</a> 
     <i class="fa fa-search" aria-hidden="true"></i> 
    </div> 
    <div class="lap-2"> 
    </div> 
</header> 
<div class="lap-12 dropdown-content"> 
    <div class="lap-12 dropdown-top"> 
     1 
    </div> 
    <div class="lap-12 dropdown-bottom"> 
     2 
    </div> 
</div>

，这是我的CSS：

.dropdown-content { 
    display: none; 
    position: absolute; 
    height: 150px; 
    width: 100%; 
} 

#velos:hover .dropdown-content { 
    display: block; 
}

下拉内容根本就没有出现在我的“Velos的”身份证的悬停。。 lap- *类只是给我的元素一个宽度。

来源

2017-03-03 Mike

，它不会......因为'.dropdown -content'不是'＃velos'孩子 –

CSS：

#velos:hover .dropdown-content {}

方式：

当ID velos元素徘徊，上课dropdown-content

在您的例子改变孩子们的风格，dropdown-content类元素不有#velos作为父母，所以它不会受到影响。

尝试是这样的：

<header class='lap-12 row'> 
    <div class="lap-2 center"> 
     <a href="#"><img src="logo-desktop.png" alt="logo-desktop"></a> 
    </div> 
    <div class="lap-8 center space-around"> 
     <a id='velos' href="#"><b>VELOS</b> 
      <div class="lap-12 dropdown-content"> 
       <div class="lap-12 dropdown-top"> 
        1 
       </div> 
       <div class="lap-12 dropdown-bottom"> 
        2 
       </div> 
      </div>   
     </a> 
     <a href="#"><b>PRODUITS</b></a> 
     <a href="#">LA MARQUE</a> 
     <a href="#">CONSEILS</a> 
     <a href="#">GARANTIE À VIE</a> 
     <i class="fa fa-search" aria-hidden="true"></i> 
    </div> 
    <div class="lap-2"> 
    </div> 
</header>

JSFiddle

我还添加了额外的样式下拉列表中，所以会有一个链接1个共同像素上，这将是可用的菜单：

#velos:hover .dropdown-content { 
    display: block; 
    margin-top:-1px; 
    padding-top:1px; 
}

......否则它会在盘旋之后消失，因为链接会失去悬停本身。至少在Chrome/Opera中。

来源

2017-03-03 12:45:19

你的CSS是要求设置显示：块;在悬停的内容上，作为velos的子女。

显然，这是错误的，反正它是不是真正的办法做到这一点，试试这个：

$("ul li").slideUp(); 
 
    $("label").mouseover(function() { 
 
     $("ul li").slideToggle(); 
 
    });

ul { 
 
     display: table; 
 
     list-style: none; 
 
     padding: 0; 
 
    } 
 

 
    ul li { 
 
     display: block; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <label>One</label> 
 
    <ul> 
 
     <li>One</li> 
 
     <li>Two</li> 
 
     <li>Three</li> 
 
     <li>Four</li> 
 
     <li>Five</li> 
 
    </ul>

来源

2017-03-03 13:13:08

下拉内容悬停

回答

相关问题