jQuery img opacity/layer hover？

我有一个img链接，当你将鼠标悬停在它上面时，会弹出一个彩色/不透明层。它工作得很好，除了我需要图像的名称也渐渐消失。jQuery img opacity/layer hover？

所以图像从它自己开始，但是当您将鼠标悬停在不透明度上时，会出现颜色以及图像的名称。

得到了一切，除名称位排序，卡住了。

这里是我迄今为止jsfiddle ...

$(document).ready(function(){ 
    $('ul.case-thumbs li').hover(function(){ 
     $('img', this).stop().animate({opacity: 0.6}); 
    }, function() { 
     $('img', this).stop().animate({opacity: 1}); 
    }); 
    });

来源

2013-04-22 user4630

LIVE DEMO

$(function() { 
    $('ul.case-thumbs li').on("mouseenter mouseleave",function (e) { 
     var mEnt = e.type=="mouseenter"; 
     $('img', this).stop().fadeTo(300, mEnt?0.6:1); 
     $('.thumbName', this).stop().fadeTo(300, mEnt?1:0); 
    }); 
});

HTML：

<ul class="case-thumbs clearfix"> 
    <li> 
     <div class="hover"> 
      <a href="#"> 
       <span class="thumbName">ImageName</span> 
       <img src="http://lorempixel.com/output/food-q-c-1123-900-1.jpg" alt="test" /> 
      </a> 
     </div> 
    </li> 
</ul>

CSS：

span.thumbName{ 
    position:absolute; 
    z-index:2; 
    display:none; 
} 
ul.case-thumbs li { 
    height: 165px; 
    width: 220px; 
    margin-right: 20px; 
    margin-bottom: 20px; 
    float: left; 
    list-style:none; 
} 
ul.case-thumbs li img { 
    vertical-align:middle; 
    height: 165px; 
    width: 220px 
} 
ul.case-thumbs li .hover { 
    background-color: #560963; 
}

来源

2013-04-22 12:58:52

非常感谢大家的帮助。 – user4630 2013-04-22 13:05:10

@ user4630哦，不客气！：）谢谢 – 2013-04-22 13:05:48

不知道，如果我得到你或没有，但假设这是你想要的... 你只是改变<img>透明度这里......既然映像名称是img元素外......整个改变<a>元素的透明度应该工作..由于IMG和图像的名字是一个锚标记内<a>

试试这个

$(document).ready(function() { 
$('ul.case-thumbs li').hover(function() { 
    $('a', this).stop().animate({ 
     opacity: 0.6 
    }); 
}, function() { 
    $('a', this).stop().animate({ 
     opacity: 1 
    }); 
}); 
});

fiddle here

来源

2013-04-22 12:46:24 bipen

我不希望能够看到图像/层的名字，直到你在它悬停。那么我需要把它放在一个跨度和0不透明度？ – user4630 2013-04-22 12:52:40

这是你想要的http://jsfiddle.net/bipen/jasmE/3/ – bipen 2013-04-22 12:56:01

看到这个：http://jsfiddle.net/hD7JK/

$(document).ready(function() { 
$('ul.case-thumbs li').hover(function() { 
    $('img', this).stop().animate({ 
     opacity: 0.6 
    }); 
    $('span', this).stop().animate({ 
     opacity: 1 
    }); 
}, function() { 
    $('img', this).stop().animate({ 
     opacity: 1 
    }); 
    $('span', this).stop().animate({ 
     opacity: 0 
    }); 
}); 
});

HTML：

<ul class="case-thumbs clearfix"> 
    <li> 
    <div class="hover"> <a href="#"> 
     <span>Image Name</span> 
     <img src="http://lorempixel.com/output/food-q-c-1123-900-1.jpg" alt="test" /></a> 
    </div> 
    </li> 
</ul>

来源

2013-04-22 12:59:24 Anujith

jQuery img opacity/layer hover？

回答

相关问题