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

Posted 2023-05-08

【中文标题】jQuery img 不透明度/图层悬停？

【英文标题】：jQuery img opacity/layer hover?

【发布时间】：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);
     );
    ); 

【参考方案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"  />
           </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"  /></a>
    </div>
  </li>
</ul>