Javascript 如何保持悬停框#html、#css、#js

请检查这个链接，我的问题是，当和框悬停和改变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>

---

谢谢你的帮助

将悬停绑定到容器而不是标题：

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

---

改用

.container

元素

jQuery：

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

CSS:

---

Fiddle:

请澄清您的具体问题，或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难准确地说出你在问什么。请参阅“如何寻求帮助”页面以澄清此问题。几乎是，因为我希望仍有带边框的白色框。就是这样。谢谢！！！！！！！！

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

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