1

リンクに画像があり、カーソルを合わせるとその上に色付き/不透明度のレイヤーが表示されます。フェードアップするために画像の名前が必要であることを除けば、それはうまく機能します。

したがって、画像は単独で開始されますが、不透明度の上にカーソルを置くと、画像の名前と同様に不透明色が表示されます。

名前のビット以外はすべて整理して、それに固執しました。

これが私がこれまでに持っているものです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 に答える