我正在尝试复制当您将鼠标悬停在图像上时出现的文本叠加效果 - 在 Guardian web site 上找到.
我让它正常工作，除非我的鼠标经过 trail-text 区域，该区域反复多次反弹(slideDown slideUp)。
我认为是trail-text区域成为焦点导致mouseout事件。
无论如何，任何建议/提示都会非常有帮助。 非常感谢， 本...
我的页面.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en-en' xml:lang='en-en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>TEST</title>
<style type="text/css">
.pixie {
width: 870px;
padding: 0;
margin: 0;
}
.strap {
padding: 0;
margin: 0;
}
div.caption{
padding-left: 10px;
/*background-color: #a5a5a5;*/
background-color: #e03d32;
color: white;
}
.caption h3 {
color: white;
}
.pixie a,
.pixie div,
.pixie a:hover {
display: block;
position: relative;
text-decoration: none;
}
.pixie div.trail-text {
color: #333;
background-color: transparent;
background-image: url(../images/grey-bg.png);
background-repeat: repeat;
}
.pixie div.trail-text {
display: none;
margin-top: 0;
position: absolute;
overflow: hidden;
text-align: left;
padding-top: 2em;
padding-bottom: 0;
z-index: 10;
height: 4.25em;
width: 870px;
}
</style>
<script src='javascripts/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='javascripts/main.js' type='text/javascript'></script>
</head>
<body>
<div class='pixie'>
<div class='caption'>
<h3>Some Big Heading</h3>
<p class='strap'>Some strapline of stuff</p>
</div>
<div class='trail-text'>
The <strong>Overlay text</strong> which should appear and then disappear.
</div>
<img alt='overlay example image' class='imgmain' src='/images/east-hamstead.jpg' title='' />
</div>
</body>
</html>
主.js
$(document).ready(function(){
$("div.trail-text").attr("style", "display: none;");
if ($(".pixie,div.trail-text")) {
var pixies = $(".pixie,div.trail-text");
$(pixies).mouseover(function() {
$(this).find("div.trail-text").slideDown("fast")
}).mouseout(function() {
$(this).find("div.trail-text").slideUp("fast")
});
};
});
最佳答案
问题是 mouseover 和 mouseout 事件向上冒泡，这意味着每次鼠标进入或离开您的 div 中的任何元素时它们都会触发。
你应该使用 jQuery 的 hover方法，像这样:
$(".pixie,div.trail-text").hover(
function() { $(this).find("div.trail-text").slideDown("fast"); },
function() { $(this).find("div.trail-text").slideUp("fast"); }
);
关于图像上的 JQuery 文本 slideDown/slideUp 叠加不断跳动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1099500/