jQuery img 不透明度/图层悬停？答案

【问题标题】：jQuery img opacity/layer hover?jQuery img 不透明度/图层悬停？
【发布时间】：2013-04-15 08:56:49
【问题描述】：

我在链接中有一个 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});
     });
    });

【问题讨论】：

标签： jquery jquery-animate opacity fade

【解决方案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

【讨论】：

我不想看到图像/图层名称，直到您将鼠标悬停在它上面。那么我需要把它放在一个跨度和 0 不透明度中吗？

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：