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遍历到图像并设置其不透明度。 * Side Note $（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); 
        }
    });
});

Answer 2

使用相同的HTML和CSS，我会将事件绑定从thumb img调整为thumb，以确保事件在整个图像块上发生。在事件回调中，我使用jQuery context selector来检测img元素并对其执行淡入/淡出效果。

这里可以看到效果。 http://jsfiddle.net/yangchenyun/5pnQA/

$(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").hover(function() {
        $('img', this).fadeTo("fast", 0.3); // This should set the opacity to 100% on hover
    }, function() {
        $('img', this).fadeTo("fast", 1.0); // This should set the opacity back to 60% on mouseout
    });
});

Answer 3

您只能使用Html和CSS实现此目的，您的页面效率会更高。

的 Html5的

<a href="#" class="thumb"> <img src="images/hooty_thumb.png" width="250" height="224"/> <strong>TITLE HERE</strong> <em>Branding, Print, Web</em> <time>2011</time> </a>

<强> CSS

a.thumb{float:left; position:relative; background:#FFF; z-index:1; width:250px; height:225px; text-decoration:none; margin:0 27px 45px;} a.thumb img{opacity:0.6; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear;} a.thumb:hover img{opacity:1;} a.thumb>strong, .thumb>em, .thumb>time{opacity:0; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear;} a.thumb:hover>strong, .thumb:hover>em, .thumb:hover>time{opacity:1;}

Jquery悬停淡出缩略图

3 个答案: