Question

我有一个带有CSS“div：none”的div，我希望它在悬停“预览”类的图像时以某种方式定位。我不能只使用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与CSS“display：none”是一个滑块。

我认为我需要一个简单（不像我上面发布的链接中那些）Javascript中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;
}

Answer 2

如下：

var pos = $(element to position by).position();

var width = $(this).outerWidth();

//show the element over the placeholder
$("item to position").css({
    position: "absolute",
    top: pos.top + "px",
    left: (pos.left + width) + "px"
}).show();

}）;

一个很好的例子也是在另一个创造的小提琴上。 http://jsfiddle.net/wjbuys/QrrpB/

将元素定位在悬停另一个元素上

2 个答案: