我熟悉 html 和 css,但不擅长 css 定位。这是总体思路。假设我有一个图像链接,当我将鼠标悬停在链接中时,我需要显示一个 div,我将在其中显示该元素的一些信息。我知道应该通过绝对定位来完成。但这对我不起作用。让我展示一下设计:
http://beta.citystir.com/wp-content/uploads/2011/02/sadf.jpg
到目前为止我的工作你可以在这里看到:http://beta.citystir.com/static/
这是 Html。我已经显示了一个元素的代码。 Hover_preview 将是悬停时应显示的整个 div。我现在不介意悬停效果,因为我将通过 javascript 来实现。只帮助我如何正确显示 div。
<ul id="featured_classifields">
<div id="fcf_wraper">
<li>
<a href="#"><img src="images/temp/featured-thumb.png" title="" alt="" width="135" height="90" /></a>
<div class="hover_preview">
<div class="hover_preview_main">
</div>
<div class="hover_preview_arrow"></div>
</div>
</li>
<li>
</div>
</ul>
CSS:
ul#featured_classifields{
margin: 0 30px;
height:95px;
overflow:hidden;
position:relative;
}
#fcf_wraper{
width:1600px;
height:90px;
}
ul#featured_classifields li{
float:left;
width:135px;
height:90px;
background:#ddd;
display:block;
margin: 8px 8px 5px 0;
position:relative;
}
.hover_preview{
position:absolute;
z-index: 5;
bottom:100%;
}
.hover_preview_main{
background: #000;
width:400px;
height: 300px;
}
.hover_preview_arrow{
}
代码的一些细节: ul 持有完整的 slider 。比起所有 li 都用 div #fcf_wraper 包裹起来,它的宽度等于我将通过 javascript 确定的所有 li,但现在我只输入一个值。为了不显示包装器的额外部分,我将溢出设置为隐藏。问题是当我将溢出设置为隐藏时,div“hover_preview”也被它隐藏了:(
希望得到您的帮助。谢谢!
最佳答案
做这样的事情:
$("#fcf_wraper img").hover(
function () {
$("div.hover_preview").css({
position: "absolute",
left: $(this).offset().left + "px",
top: $(this).offset().top - $("div.hover_preview").outerHeight() + "px",
display: "block"
});
},
function () {
$("div.hover_preview").hide();
});
关于jquery - 帮我做 css 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4914574/