使用onmouseover在元素旁邊顯示div？

我有一個div，像這樣的：在我的頁面的底部使用onmouseover在元素旁邊顯示div？

<div id="div1" name="div1" style="display:none;"> 
    hello world 
</div>

那。現在，將鼠標放在圖像上時，我想在圖像下方顯示div。問題是，我有10個圖像彼此相鄰，div應該顯示在每個動態下方，這意味着將鼠標放在圖像6上應顯示圖像6下方的div。

我該怎麼做？

謝謝！

來源

2012-09-28 user1638055

我會建議你使用jQuery。你有任何經驗嗎？ – rafaelbiten

那麼，隱藏和顯示不是問題。我不知道如何在鼠標結束的元素下方顯示它。 – user1638055

你想移動DOM中的div還是要使用CSS位置屬性？ –

，如果你想使用jQuery和要移動的DIV的DOM中這可能是一個辦法：

$(function() { 
    var div1 = $('#div1').remove(); 
    $('img') 
     .bind('mouseenter', function() { 
      $(this).parent().append(div1); 
     }) 
     .bind('mouseleave', function() { 
      div1.remove(); 
     }); 
});

來源

2012-09-28 13:01:14

謝謝，我將如何使用該腳本？ – user1638055

嗯，這是Javascript。把它放入腳本標籤，加載一個jQuery庫並重新加載頁面... –

這隻能由此處的CSS來實現是一個工作示例：

<html> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 


    <style> 

     *     { margin: 0; padding: 0; } 
     body    { font: 12px Helvetica, Sans-Serif; } 

     img     {width: 125px;} 
     #page-wrap   { width: 125px; margin: 62px auto; } 

     h1     { font-size: 30px; letter-spacing: -1px; margin: 0 0 20px 0; } 

     .people    { position: relative; width: 125px;} 
     a     { text-decoration: none; color: #222; display: block; outline: none; padding: 5px; } 
     a img    { border: 1px solid #ccc; } 
     a .name    { font: 12px Georgia, Serif; width: 125px; display: none;} 
     a:hover .name  { color: #900; font-weight: bold; position: relative; display: block;} 
     a:hover img   { border: 1px solid #000; margin: 0px; } 
     a .photo   { display: block; position: absolute; width: 125px; height: 125px; } 
     #toby .photo  { top: 0; left: 0; position: relative;} 

    </style> 
</head> 

<body> 

    <div id="page-wrap"> 

     <div class="people"> 

      <a href="#toby" id="toby"> 
       <div class="photo"> 
        <img src="http://www.style-makeover-hq.com/images/what-is-my-face-shape-and-what-is-the-best-haircut-for-it-21276689.jpg" alt="Toby Pic" /> 
       </div> 
       <div class="name">Toby Yong<br /> 
        Toby Young joins the fifth season of Top Chef to lend his culinary expertise to the judges table. 
       </div> 
      </a> 

     </div> 

    </div> 

</body> 

</html>

這裏是它的jsfiddle：http://jsfiddle.net/Ek4Ej/

代碼是基於這篇文章：http://css-tricks.com/remote-linking/

您可以輕鬆地在頁面上添加更多具有此效果的圖像或應用任何樣式。

來源

2012-09-28 13:06:08 Develoger

試試這個DEMO

$(function() { 

    $("#main").on("hover",".img img", function(){ 

    pos = $(this).offset(); 
    $(".box").css({"left":pos.left,"top":(pos.top + $(this).height())}); 
    $(".box").show(); 

    }); 


});

來源

2012-09-28 13:07:15 Champ

使用onmouseover在元素旁邊顯示div？

回答

相關問題