logo标签列表

jQuery悬停效果

javascriptjquery
3

我要如何实现与这个链接相同的效果？

http://bavotasan.com/demos/fadehover/

但只对锚点标签有效，不对图像有效。举个例子，如果我的锚点背景是蓝色，并希望将其更改为红色，但仍具有此效果，我该怎么做？谢谢。

3个回答
4
使用hover和animate。请注意，这需要jQuery颜色动画插件。
<html>
<head>
  <title>color change</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
  <script src="http://plugins.jquery.com/files/jquery.color.js.txt" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    $(function() {
      $('a').hover(function() {
        $(this).animate({
          color: "#f00"
        }, "fast")
      }, function() {
        $(this).animate({
          color: "#00f"
        }, "fast")
      });
    });
  </script>
  <style>
    a { color: #00f; }
  </style>
</head>
<body>
  <a href="#">This changes color on hover.</a>
</body>
</html>

在更改a元素的颜色示例中，没有必要使用您提供的链接中使用的淡入淡出效果。
3

通过CSS中的position和z-index属性将两个图像叠放在一起。一个是黑白的，另一个是彩色的：

/* Assumes width and height are the same between all three elements */
.viewBox  { position:relative; width:125px; height:125px; display:block; }
img.color { position:absolute; top:0; left:0; z-index:10; }
img.bandw { position:absolute; top:0; left:0; }

<a class="viewBox" href="http://google.com">
  <img src="color.jpg" class="color" />
  <img src="bandw.jpg" class="bandw" />
</a>

$(".viewBox").hover(
  function() {
    $("img.color").fadeIn();
  },
  function() {
    $("img.color").fadeOut();
  }
);

--

另外，您也可以不使用jQuery，而是使用纯CSS来实现这一点：

span.hov span            { display:none; }
.rollover                { display:block; background-image:url('bandw.jpg'); 
                           width:125px; height:125px; }
.rollover span.hov       { display:none;  background-image:url('color.jpg');
                           width:125px; height:125px; }
.rollover:hover span.hov { display:block; }

<a class="rollover">
  <span class="hov">
    <span>Invisible Link Text</span>
  </span>
</a>
我的问题是如何使用<a>标签}，并打开<div>和关闭</a>..谢谢 - Gandalf StormCrow
0

网页上提供了HTML、CSS和jQuery代码。

在这里，创建者将两张图片叠放在一起，然后使用jQuery来改变透明度。

<div class="fadehover">
  <img class="a" alt="" src="cbavota-bw.jpg" style="opacity: 1;"/>
  <img class="b" alt="" src="cbavota.jpg"/>
</div>

$(document).ready(function(){
  $(".a").hover(function() {
    $(this).animate({"opacity": "0"}, "slow");
  },
  function() {
    $(this).animate({"opacity": "1"}, "slow");
  });
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接