javascript - 如何握住悬停框？ #html、#css、#js

Question

请检查此链接 https://jsfiddle.net/mth4d7xt/1/ ，我的问题是，当框悬停并将 img 更改为边框框时，也会更改 img 下的文本。

当我向下并想要选择 img 下的链接时，我希望悬停框仍处于悬停状态

<div class="container">
<article class="caption">
    <img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
    <div class="caption__overlay">
        <p>
            Alaska is a U.S. state situated in the northwest extremity of the North American continent. Bordering the state is Canada to the east, the Arctic Ocean to the north, and the Pacific Ocean to the west and south, with Russia (specifically, Siberia) further west across the Bering Strait.
        </p>
    </div>
</article>
<div class="box_text">
  <div class="a">sample text</div>
  <div class="b">
    <a href="#">text</a>
    <a href="#">text</a>
    <a href="#">text</a>
  </div>
</div>

感谢您的帮助!

Answer 1

使用 .container 元素代替..

jQuery:

$(document).ready(function() {
    $('.b').hide();
    $('.container').hover(function() {
        $('.a').toggle();
      $('.b').toggle();
    });
})

CSS:

.container:hover .caption::before {
    background: rgba(255, 255, 255, 1);
}

.container:hover .caption .caption__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

fiddle :https://jsfiddle.net/7c7LdL6a/