0

我有一个 div，像这样：

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

那是在我页面的底部。现在，当将鼠标放在图像上时，我想在图像下方显示该 div。问题是，我有 10 个相邻的图像，并且 div 应该动态显示在每个图像下方，这意味着将鼠标放在图像 6 上应该显示图像 6 下方的 div。

我怎样才能做到这一点？

谢谢！

4

3 回答 3

0

这只能通过 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-28T13:06:08.377 回答
0

试试这个演示

$(function() {

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

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

  });


});
于 2012-09-28T13:07:15.743 回答
0

如果您想使用 jQuery 并希望在 DOM 中移动 div，这可能是一种方法：

$(function() {
    var div1 = $('#div1').remove();
    $('img')
        .bind('mouseenter', function() {
            $(this).parent().append(div1);
        })
        .bind('mouseleave', function() {
            div1.remove();
        });
});
于 2012-09-28T13:01:14.590 回答