jquery - 将元素悬停在另一个元素上

Question

我有一个带有 CSS“display:none”的 div，我希望它在悬停类“preview”的图像时以某种方式定位。我不能只使用 CSS，因为我隐藏的 div 涉及图像，这些图像将根据您悬停在列表项中的图像进行更改。我已经阅读并尝试了这里的一切， How to position one element relative to another with jQuery?

但对我没有任何作用。这是我的 HTML:

   <div id="content">
        <ul>
           <li>
                <a href="#">
                    <img class="preview" src="images/E46_1.jpg">
                </a>
               <div>Whatever whatever whatever whatever whatever</div>
            </li>

            <li>
                <a href="#">
                    <img class="preview" src="images/E93_1.jpg">
                </a>
               <div>Whatever whatever whatever whatever whatever</div>
            </li>

            <li>
                <a href="#">
                    <img class="preview" src="images/E46_1.jpg">
                </a>
               <div>Whatever whatever whatever whatever whatever</div>
            </li>
        </ul>
    </div>

我的带有 CSS“display:none”的 div 是一个 slider 。

我想我需要一个简单的(不像我上面发布的链接中的那些)JQuery 中Javascript getBoundingClientRect() 的类似物。请帮忙!

Answer 1

如果你能详细说明，我可以做得更好，但对于基础知识，这里是:

这是两者的结合: http://jsfiddle.net/zc2m9yh1/

jQ:

$("#content ul li").hover(function () {
    var src = $(this).find("img").attr("src");
    $(this).children("div").html('<img src="' + src + '">');
}, function () {
    //on mouseout
});

CSS:

#content ul li div {
    display: none;
}
#content ul li:hover div {
    display: block;
}
#content ul li img {
    max-width: 100px;
}