如何握住悬停框?#html、#css、#js

How to hold hover box? #html, #css, #js

本文关键字：#css #js #html 何握住 悬停      更新时间：2023-09-26

请检查此链接 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>

感谢您的帮助！

改用 .container 元素。

j查询：

$(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);
}

小提琴：https://jsfiddle.net/7c7LdL6a/

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

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

https://jsfiddle.net/mth4d7xt/3/

相关文章：