javascript - Jquery 悬停淡入淡出缩略图

Question

我正在尝试创建一些 jquery 风格的悬停淡入/淡出缩略图。我已经设法在图像上进行了悬停，但是有一个问题。当用户悬停时，我希望出现一些文本，这是我用 CSS 实现的，问题是，当用户将鼠标悬停在文本上时，图像会淡入。我想知道如何才能使图像继续显示保持淡出，同时悬停在文本上。我也不希望文本变淡，我试过简单地切换到脚本部分中的拇指类。

<script>
$(document).ready(function(){
    $(".thumb img").fadeTo("fast", 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads

    $(".thumb img").hover(function(){
        $(this).fadeTo("fast", 0.3); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("fast", 1.0); // This should set the opacity back to 60% on mouseout
    });


});
</script>

HTML

<div class="thumb">
 <a href="#"><img src="images/hooty_thumb.png" width="250" height="224"/></a>
 <div class="title">
<h1 class="din"><a href="#">TITLE HERE</a></h1>
<h2><a href="#">Branding, Print, Web</a></h2>
<h2><a href="#">2011</a></h2></div></div>

CSS:

.thumb {float: left; background-color: #FFF; z-index: 1; width: 250px; height: 225px; margin-right: 27px; margin-bottom: 45px; display: inline-block; *display:inline; *zoom: 1; position: relative;}
.thumb .title{position:absolute; width: 250px;  top: 40%; left:0%; text-align: center; display: none; z-index: -1;}
.thumb:hover .title{display: inline; z-index: 1;}
.thumb .title h1{color:#00F;}

Answer 1

好了，您需要上一层并将翻转事件附加到父级，然后将 DOM 遍历到图像并设置其不透明度。 *旁注 $(document).ready(function(){ }) 与 $(function(){ }) 相同

$(function(){
    $(".thumb img").fadeTo("fast", 1.0); 

    $(".thumb").bind({
        mouseenter:function(){
            $('img', this).fadeTo("fast", 0.3);
        },mouseleave: function(){
            $('img', this).fadeTo("fast", 1.0); 
        }
    });
});