javascript - 使用 Jquery 悬停所有子元素

Question

大家好，我有一个包含 image 的 div和一个 <figure>用<figcaption> .我想要它，所以当有人将鼠标悬停在框上时，它会触发所有悬停效果。有任何想法吗？这是我如何制作悬停效果。

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 hover 效果改变标志为彩色标志

$(".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 上它甚至会触发 Logo 更改 jquery。

Answer 1

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

$(".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 来避免文本覆盖它。

为了便于阅读，我缩短了图片的 URL。无论如何，您应该避免使用绝对路径，因为更改网址会破坏您的代码。