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 に答える