jQuery img opacity / layer hover？

Question

我在链接中有一个img，当你将鼠标悬停在它上面时会在顶部显示一个彩色/不透明层。它工作得很好，除了我需要图像的名称也淡出。

因此图像会自动开始，但当您将鼠标悬停在不透明度上时，会出现图像名称。

除了名称之外的所有内容都有点排序，卡在上面。

这是我到目前为止jsfiddle ...

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

Answer 1

不确定我是否得到你，但假设这是你想要的...... 你只是在这里改变<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

Answer 2

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

Answer 3

请参阅：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>