1

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

3 回答 3

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

在这里摆弄

于 2013-04-22T12:46:24.887 回答
0

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-22T12:58:52.363 回答
0

看到这个：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-22T12:59:24.190 回答