html - CSS 悬停另一个元素

Question

当我将鼠标悬停在 .categories 类上时，我想定位 .drop 类，仅使用 css 可以做到这一点吗？

Answer 1

div {
  width: 200px;
  height: 200px;
  float:left;
  margin: 10px;
  border: 1px solid #333;
}
.categories:hover ~ .drop {
  background-color: red;
}

<div class="categories">categories</div>
<div class="drop">drop</div>

恐怕您无法仅使用 CSS 定位相对于悬停元素而言取决于 DOM 的元素。您可以像这样使用 jQuery 实现此目的:

$('.categories').hover(function() {
    $('.drop').css({ // your code }) 
});

如果 HTML 是这样的检查片段:

<div class="categories"></div>
<div class="drop"></div>

你可以这样做:

.categories:hover ~ .drop {
    /* css rules */
}