Question

嘿伙计们我有一个包含image和<figure>且<figcaption>的div。我想要它，所以当有人鼠标悬停在盒子上时，它会触发所有悬停效果。有任何想法吗？这是我如何做我的悬停效果。

HTML：

    <a href="http://support.jonar.com/support/default.asp?W2294">
    <div class="box1">
        <figure>
            <img class="jlogo" src=
            "http://www.jonar.com/portal/partner/img/jonar_logo_white.png">
            <figcaption>
                Jonar &amp; You
            </figcaption>
        </figure>
    </div>
</a>

CSS：

box1悬停的css效果

 .box1:hover {
    opacity: 0.9;
    background: -webkit-linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
    background: -o-linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
    background: -moz-linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
    background: linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
}

Jquery悬停效果将徽标更改为彩色徽标

$(".jlogo").on({
 "mouseover" : function() {
    this.src = 'http://www.jonar.com/portal/partner/img/jonar_logo_color.png';
  },
  "mouseout" : function() {
    this.src='http://www.jonar.com/portal/partner/img/jonar_logo_white.png';
  }
});

我想我希望当有人将鼠标放在box1上时，即使徽标更改了jquery也会触发。

Answer 1

要在框悬停时更改徽标，请使用框的鼠标事件而不是徽标。可以这样做：

$(".box1").on({
  "mouseover" : function() {
    $(this).find(".jlogo").attr("src", "jonar_logo_color.png");
  },
  "mouseout" : function() {
    $this("this").find(".jlogo").attr("src", "jonar_logo_white.png");
  }
});

$this("this").find(".jlogo")找到类jlogo的任何元素，该元素是悬停元素的后代。

另外，您可能只使用CSS（我认为更可取）来完成此效果。用具有相同类的空div替换图像，然后使用此CSS：

.jlogo {
    width: 100px; /* Width of image */
    height: 100px; /* Height of image */
    background-repeat: no-repeat;
    background-image: src("jonar_logo_color.png");
}

/* When the box is hovered. */
.box1:hover .jlogo {
    background-image: src("jonar_logo_white.png");
}

如果您使用的图像是内联的，您可能需要添加display: inline;以使div以相同的方式运行。此外，如果您想避免为图像添加额外的div，则可以将其用作figcaption的背景图像，并使用padding-left来避免文本覆盖它。

为了便于阅读，我缩短了图片的网址。你应该避免使用绝对路径，因为更改webadress会使代码失效。

Answer 2

正如我在评论中所说，您可以轻松地更改代码以使用背景图像，而根本不需要使用JavaScript。

但是如果你想坚持你的html代码，为什么要触发事件呢？只需更改代码以侦听box元素上的鼠标事件。

$(".box1").on({
 "mouseenter" : function() {
    $(this).find(".jlogo").attr("src", 'http://www.jonar.com/portal/partner/img/jonar_logo_color.png');
  },
  "mouseleave" : function() {
    $(this).find(".jlogo").attr("src",'http://www.jonar.com/portal/partner/img/jonar_logo_white.png');
  }
});

Answer 3

var $logo =  $(".jlogo");

$('.box1').on({
    'mouseover': function () {
       $logo.attr('src', 'http://www.jonar.com/portal/partner/img/jonar_logo_color.png');
    },
     'mouseout': function () {
       $logo.attr('src', 'http://www.jonar.com/portal/partner/img/jonar_logo_white.png');
    }
});

<强> this link

Answer 4

至于我，只使用CSS会更优雅：

<强> HTML

    <a href="http://support.jonar.com/support/default.asp?W2294">
     <div class="box1">
      <figure>
        <div class="jlogo"></div>
        <figcaption>
            Jonar &amp; You
        </figcaption>
      </figure>
     </div>
    </a>

<强> CSS

 .box1:hover {
    opacity: 0.9;
    background: -webkit-linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
    background: -o-linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
    background: -moz-linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
    background: linear-gradient(rgb(25, 16, 20), rgb(74, 41, 39));
 }

 .box1 .jlogo{
    width:80px;
    height: 64px;
    background-image: url("http://www.jonar.com/portal/partner/img/jonar_logo_white.png");
 }

 .box1:hover .jlogo{
    background-image: url("http://www.jonar.com/portal/partner/img/jonar_logo_color.png");
 }

JSFIDDLE

使用Jquery悬停所有子元素

4 个答案: