したがって、www.graysonearle.com/newtest にアクセスすると、私のサイトが進行中であることがわかります。ボックスにマウスを合わせると、プロジェクトの説明がポップアップ表示される jQuery スクリプトを使用しています。問題は、マウスアウトの後も説明が残っていることがあることです。また、説明がポップアップしないこともあります。マウスをすばやく動かすと、壊れやすくなります。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)
});
});