jquery悬停淡出缩略图

我想创建一些jquery样式的悬停淡入/淡出缩略图。我已经设法在图像上进行悬停，但是这是一个问题。当用户悬停时，我想要一些文字出现，这是我用CSS实现的，问题在于，当用户将文字悬停在文字上时，图像逐渐淡入。我想知道如何才能让它继续呈现图像保持淡出状态，同时也徘徊在文本上。我不希望文字变淡，我只是尝试在脚本部分切换到拇指类。jquery悬停淡出缩略图

<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;}

来源

2011-11-13 Amy

在这里你去，你需要去上一级，并附加侧翻事件到父，然后遍历DOM的形象和设置其不透明度。 *旁注$（文件）。就绪（函数（）{}）是一样的$（函数（）{}）

$(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); 
     } 
    }); 
});

来源

2011-11-13 20:14:17 Marlin

谢谢谢谢你谢谢！ – Amy

您可以用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;}

来源

2011-11-13 20:12:54

唯一的问题是这是当我加我为中心的代码到中心中间的文本，所有的EM，强力等相互重叠，有没有办法解决这个问题的方法吗？此外webkit只适用于Safari浏览器，Chrome浏览器不是吗？ – Amy

在相同的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 
    }); 
});

来源

2011-11-13 20:14:18 steveyang

jquery悬停淡出缩略图

回答

相关问题