时间戳

首页 > 解决方案 > 当悬停另一个具有不同父级的 div 时，CSS 显示 div

html - 当悬停另一个具有不同父级的 div 时，CSS 显示 div

问题描述

我试图在另一个 divdisplay时更改一个属性。hover

.pc-hover {
  display: none;
}
.pc-content-image img:hover + .pc-hover {
  display: block;
}
<div class="profile-content">
  <div class="pc-hover">{hover}</div>
  <div class="pc-header">{head}</div>
  <div class="pc-content">
    <div class="pc-content-image">
      <img src="https://via.placeholder.com/300" alt="placeholder" />
    </div>
    <div class="pc-content-text">
      <p>{text}</p>
      <p>{text2}</p>
    </div>
  </div>
</div>

最初，pc-hover直到鼠标将图像悬停在pc-content-image. 但是当我将鼠标悬停在图像上时没有任何反应。

我从Using only CSS, show div on hover over another element中看到了一些参考资料，但我不明白该怎么做。

尝试使用+and ~，但不工作。

有没有办法做到这一点？感谢任何帮助，谢谢。

标签： htmlcss

解决方案

两个问题：

  1. 仅当兄弟元素位于 html 源中的悬停元素之后时，相邻+的兄弟运算符 ( ) 才会起作用。所以我在我的例子中把它移到了图像 div 的下方。

  2. 您将悬停事件附加到imgdiv 内的元素。该图像没有任何相邻的兄弟姐妹，因此您的 CSS 将不起作用。为此，我们必须侦听作为相邻兄弟的父级div.pc-content上的div.pc-hover悬停。

我不确定 CSS 中是否有“前面的兄弟运算符”，否则您必须使用 flex 和flex-direction: column-reverse（例如）才能将隐藏的 div 放在源中图像下方但在其上方的正确位置在输出中。

.pc-hover {
  display: none;
}

.pc-content-image img:hover {       
  cursor: pointer;
  border: 1px solid red;
}

.pc-content-image:hover + .pc-hover {
  display: block;
  height: 10rem;
  background: red;
  margin-bottom: 1rem;
}
<div class="profile-content">
  <div class="pc-header">{head}</div>
  <div class="pc-content">
    <div class="pc-content-image">
      <img src="https://via.placeholder.com/100" alt="placeholder" />
    </div>
   <div class="pc-hover">{hover}</div>
    <div class="pc-content-text">
      <p>{text}</p>
      <p>{text2}</p>
    </div>
  </div>
</div>

推荐阅读