下拉內容懸停

這是我的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

下拉內容懸停

回答

相關問題