我使用jQuery淡化图标鼠标悬停的标题。
$("#v1").mouseover(function()
{
$("#vc1").fadeIn("slow");
});
以下是html
<div class="preview_item" id="p1">
<div class="view_site_caption" id="vc1">View Site...</div>
<div class="view_site" id="v1"><a href="http://www.delicious.com" target="_blank"><img src="application.png" /></a></div>
<div><img src="screens/001.jpg" /></div>
</div>
和CSS:
.view_site_caption
{
position:relative;
top:10px;
left:30px;
display:none;
}
.view_site
{
position:relative;
top:30px;
left:30px;
}
.preview_item
{
position:absolute;
left:-600px;
top:170px;
}
当mouseover
触发它时<div><img src="screens/001.jpg /></div>
被推下来。我希望它留在原地,view_site_caption
div才能淡入。
答案 0 :(得分:0)
将“div”赋予ID或Css类:
<div class="preview_item" id="p1">
<div class="view_site_caption" id="vc1">View Site...</div>
<div class="view_site" id="v1"><a href="http://www.delicious.com" target="_blank"><img src="application.png" /></a></div>
<div id="donotmove"><img src="screens/001.jpg" /></div>
</div>
用绝对定位来设计它:
.preview_item
{
position:absolute;
left:-600px;
top:170px;
}
#donotmove {
position:absolute;
left:0px; //play with these numbers
top:20px; //play with these numbers
}
答案 1 :(得分:0)
不确定您是否希望#vc1
始终占用相同的空间,或者您希望它显示在其他内容之上。
对于第一个选项,请移除display:none;
,然后将opacity
设置为0
,并使用fadeTo("slow", 1)
作为示例。
对于第二个选项,您可能希望在position:absolute;
#vc1
上使用position:relative;
,#p1
div
,以便将其置于bottom:0; left:0;
之内,然后只需添加#p1
,例如,如果这是#vc1
中要放置{{1}}的点。