【问题标题】:When hover header change opacity image当悬停标题更改不透明度图像时
【发布时间】:2013-10-31 08:11:56
【问题描述】:

我还需要在悬停标题时更改图像的不透明度。 现在我只有在悬停图像时才有不透明度。

在此处查看示例小提琴脚本: http://jsfiddle.net/fourroses666/EmsaG/1/

JS:

$(document).ready(function(){    
  $("img.a").hover(
    function() {
      $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
      $(this).stop().animate({"opacity": "1"}, "slow");
  }); 
});

HTML:

<div class="m-blok one">
    <h3 class="m-kop"><a href="#">Some header</a></h3>
    <img class="a" src="http://tinyurl.com/732qwvt" width="178" height="78" alt="" style="opacity: 1;">
    <img class="b" src="http://tinyurl.com/nrbj2uk" width="178" height="78" alt="" />
</div>

CSS

.m-blok{width:178px; height:78px; position:relative; margin:15px;}

img.a {left: 0; position: absolute; top: 0; z-index: 10;}
img.b {left: 0; position: absolute; top: 0;}

.m-kop{position:absolute; z-index:11; color:#fff; margin:55px 0 0 5px; max-width:150px; background:#f00;}
.m-kop a, .m-kop a:hover{color:#fff; text-decoration:none;}

【问题讨论】:

    标签: javascript css hover opacity


    【解决方案1】:

    有了你已经完成的,你可以这样做:

    $(document).ready(function(){    
      $("img.a, .m-kop").hover(
        function() {
          $("img.a").stop().animate({"opacity": "0"}, "slow");
        },
        function() {
          $("img.a").stop().animate({"opacity": "1"}, "slow");
      }); 
    });
    

    【讨论】:

    猜你喜欢
    • 2015-12-23
    • 2013-07-28
    • 2013-12-08
    • 2017-07-13
    • 2017-06-10
    • 2013-09-11
    • 2013-06-25
    • 2015-06-04
    • 1970-01-01
    相关资源
    最近更新 更多