时间戳

首页 > 解决方案 > 悬停显示隐藏的div上的CSS不起作用

html - 悬停显示隐藏的div上的CSS不起作用

问题描述

HTML：

 <div class="top-container">
    <div class="primary-text">lorem</div>
    <div class="secondary-text">lorem</div>
</div>
<div class="secondary-container">
        <h2>Lorem ipsum dolor sit amet.</h2>
</div>
<div class="info-container">
   <div class="container-one">
       <div class="box1">1</div>
       <h3>lorem</h3>
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
    </div>
   <div class="container-two">
    <div class="box2">2</div>
    <h3>lorem</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
   </div>
   <div class="container-three">
    <div class="box">3</div>
    <h3>lorem</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
</div>
</div>
<div class="info-sec">
    <img src="test.png" alt="blah">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

相关CSS：

.info-sec{
visibility:hidden;

}
.box:hover + .info-sec{
    visibility:visible;
}

如果我将悬停从框更改为信息容器，它可以正常工作：

.info-container:hover + .info-sec{
visibility:visible;
}

但是使用框悬停不起作用。我也尝试过使用 display: none; 并显示：块；

代码笔： https ://codepen.io/colton-22/pen/jOwoMxL

标签： htmlcss

解决方案

+ 是相邻的Sibling Selector 。所以当你使用：

.info-container:hover + .info-sec{
visibility:visible;
}

它之所以有效，是因为info-sec 是 info-container 的第一个下一个兄弟。但是当你使用时：

.box:hover + .info-sec{
    visibility:visible;
}

它不起作用，因为info-sec 不是 info-container 的兄弟。

据我所知，css 中没有适合您的选择器。所以，你必须使用javascript来实现这一点。

推荐阅读