Question

我使用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才能淡入。

Answer 1

将“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
}

Answer 2

不确定您是否希望#vc1始终占用相同的空间，或者您希望它显示在其他内容之上。

对于第一个选项，请移除display:none;，然后将opacity设置为0，并使用fadeTo("slow", 1)作为示例。

对于第二个选项，您可能希望在position:absolute; #vc1上使用position:relative;，#p1 div，以便将其置于bottom:0; left:0;之内，然后只需添加#p1，例如，如果这是#vc1中要放置{{1}}的点。

防止div跳上fadein

2 个答案: