顯示OUTSIDE div：hover

我得到了這個菜單我一直在努力，我想讓一個外部div出現，當我把鼠標懸停在a上時。顯示OUTSIDE div：hover

我搜遍了所有stackoverlow，但所有這些解決方案似乎無法爲我工作。我一定做錯了什麼。我希望得到這方面的幫助。

我的HTML

 <div id="hover1"></div> 
     <div style="float: left; position: relative; left: 50%; margin-top: 237px;"> 
      <img src="img/octo_logo.png" class="logo" /> 
     </div> 
     <!-- MENU start --> 
     <div id="menu"> 
      <ul> 
       <li><a href="bio.html"><span>BIO</span></a></li> 
       <li><a href="equipa.html"><span>EQUIPA</span></a></li> 
       <li><a href="reconhecimento.html"><span>RECONHECIMENTO</span></a></li> 
       <li><a href="parceiros.html"><span>PARCEIROS</span></a></li> 
       <li><a href="porque_nao.html"><span>PORQUE NÃO?</span></a></li> 
       <li><a href="contactos.html"><span>CONTACTOS</span></a></li> 
      </ul> 
     </div>

我的CSS：

#hover1{ 
    width: 155px; 
    height: 650px; 
    background-color: #57C194; 
    float:left; 
    position: absolute; 
    display: none; 
    } 
#menu a:hover + #hover1{ 
    display: block; 
    }

這裏的菜單http://i.imgur.com/2qqjBpo.png

而結果我想http://i.imgur.com/7DtXsDE.png

編輯的觀點：我願意使用jquery。

來源

2015-04-02 White8Tiger

退房[這個stackoverflow答案]（http://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-元素）和相應的[jsfiddle]（http://jsfiddle.net/AGgpN/3/）示例。 – jdegens 2015-04-02 14:03:49

@jdegens我想展示的div不是父母，也不是孩子。 – White8Tiger 2015-04-02 14:06:36

用你得到你的HTML結構的方式...這是不可能的只有CSS。答案[這裏]（http://stackoverflow.com/questions/14382149/show-div-when-hover-another-div-using-only-css）顯示了一個javascript示例，用於更改不在旁邊或包含的元素在懸停元素中。 – 2015-04-02 14:06:49

隨着你上面有什麼;一個簡單的jQuery的例子是這樣的：

$('#menu a') 
.on('mouseover', function (event) { 
    $('#hover1').show(); 
}) 
.on('mouseout', function (event) { 
    $('#hover1').hide(); 
});

編輯：

的原因可能是因爲DOM元素還沒有準備好。

嘗試用包裝上面的代碼：

$(function() { 
    // above code here 
});

，或者如果不工作：

$(document).ready(function() { 
    // above code here 
});

來源

2015-04-02 14:10:18

$(function() { 
    // DOM ready 

    $('#menu a').hover(
     function() { 
      $('#hover1').show(); 
     }, 
     function() { 
      $('#hover1').hide(); 
     }); 
});

直播prewiew（它是如何工作）http://jsfiddle.net/e7bp0oz1/1/

來源

2015-04-02 14:17:37

給代碼回答問題很好，但最好還是解釋它的作用和解決問題的方法。謝謝 – AFract 2015-04-02 14:20:33

顯示OUTSIDE div：hover

回答

相關問題