僅當懸停圖像時才顯示菜單

我希望我的菜單被隱藏，當我將圖像懸停時，我希望菜單出現。我已經嘗試了以下在Stackoverflow中看到的東西，但它不起作用。我如何只用CSS呢？僅當懸停圖像時才顯示菜單

HTML：

 <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span>       
      </button> 
      <a class="navbar-brand" href="#">Test</a> 
     </div> 
     <div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#section1">Section 1</a></li> 
       <li><a href="#section2">Section 2</a></li> 
       <li><a href="#section3">Section 3</a></li> 
    </ul> 
      </div> 
     </div> 
     </div> 
    </nav>  
<img src="img/ea.PNG" class="img-responsive img-center" id="imgmenu">

CSS：

.navbar{ 
    display:none !important; 
} 

#imgmenu:hover + .navbar{ 
    display:block; 
}

來源

2015-07-21 user3375665

您錯過了''元素，我猜你沒有在你的項目中？ –

我在這裏忘了...我已經更新了它 – user3375665

可能的重複 - http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector所以，目前不可能。該圖像必須在**菜單**和**之前**共享一個共同的父母。 –

首先，你必須將圖像菜單之前，看看這個例子（沒有JS）：

.navbar{ 
 
    display:none; 
 
    margin-top: -10px; 
 
    padding-top: 10px; 
 
    position: relative; 
 
} 
 

 
#imgmenu:hover + .navbar{ 
 
    display:block; 
 
} 
 
.navbar:hover{ 
 
    display:block; 
 
}

<div id="main-menu"> 
 
<img src="http://www.shoredreams.net/wp-content/uploads/2014/02/show-menu-icon.png" class="img-responsive img-center" width="50px" height="50px" id="imgmenu"> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span>       
 
      </button> 
 
      <a class="navbar-brand" href="#">Test</a> 
 
     </div> 
 
     <div> 
 
      <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#section1">Section 1</a></li> 
 
       <li><a href="#section2">Section 2</a></li> 
 
       <li><a href="#section3">Section 3</a></li> 
 
    </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </nav>  
 
</div>

來源

2015-07-21 11:32:09 JoseAPL

僅當懸停圖像時才顯示菜單

回答

相關問題