css - 为什么当我将鼠标悬停在图像上时它不起作用？

Question

一旦我得到提示，我确信这非常愚蠢，但我不明白为什么悬停不起作用。我添加了 jQuery 只是为了检查它是否可以通过单击来工作。

$(document).on("click", ".figure", function() {
  $(".popover").css("opacity", "1");
})

.container {
  position: relative;
}

.popover {
  background-color: blue;
  position: absolute;
  top: 0;
  left: 200px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out 0s;
}

.figure:hover .popover {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='figure'>
    <img src='https://placehold.it/100' />
  </div>
  <div class='popover'>
    <p>
      Bla bla
    </p>
  </div>
</div>

Answer 1

因为您的 .popover div 不是 .figure div 的子元素。

为此使用了 + 选择器

$(document).on("click", ".figure", function() {
  $(".popover").css("opacity", "1");
})

.container {
  position: relative;
}

.popover {
  background-color: blue;
  position: absolute;
  top: 0;
  left: 200px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out 0s;
}

.figure:hover + .popover {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='figure'>
    <img src='https://placehold.it/100' />
  </div>
  <div class='popover'>
    <p>
      Bla bla
    </p>
  </div>
</div>