因此,如果您访问 www.graysonearle.com/newtest,您将看到我的网站正在进行中。我正在使用一个 jQuery 脚本,当您将鼠标悬停在该框上时,该脚本会弹出项目描述。问题是有时描述会在 mouseOut 之后保留,即使您再次返回它们也是如此。而其他时候,描述只是没有弹出。如果您快速移动鼠标,则更容易破坏。这是jQuery:
$(window).load(function() {
// For each instance of p.caption
$("p.caption").each(function() {
// needs a 1px bump
$(this).children("span").css({
"margin-left": "1px"
});
$(this)
// Add the following CSS properties and values
.css({
// Height equal to the height of the image
"height": $(this).children("img").height() + "px",
// Width equal to the width of the image
"width": $(this).children("img").width() + "px"
})
// Select the child "span" of this p.caption
// Add the following CSS properties and values
.children("span").css(
// Width equal to p.caption
// But subtract 20px to callibrate for the padding
"width", $(this).width() - 10 + "px")
// find the <big> tag if it exists
// And then add the following div to break the line
.find("i").before('<div class="clear"></div>');
// When you hover over p.caption
$("p.caption").hover(function() {
// Fade in the child "span"
$(this).children("span").stop().fadeTo(200, 1);
}, function() {
// Once you mouse off, fade it out
$(this).children("span").fadeOut(200); // removed "stop()" before fadeout
});
// End $(this)
});
});