Question

当我将鼠标悬停在div上时，我试图设置父div的样式，但它似乎不起作用。

这是我的作品

.icon-grid:hover ~ .ab_section_element {
  border: 2px solid black;
  background-color: white;
}

<div data-v-714a5b85="" class="ab_section_element">
  <span data-v-714a5b85="" class="icon icon-grid clickable">
  Section (Left Text)
  </span>
</div>

我有什么问题吗？

Answer 1

您不能使用悬停设置父级样式，但您可以执行相邻。

.div1 {
  width: 60px;
  height: 60px;
  background: red;
}

.div2 {
  width: 60px;
  height: 60px;
  background: green;
}

.div1:hover~.div2 {
  background: yellow;
}

<div class='div1'></div>
<div class='div2'></div>

Answer 2

您无法选择父元素，但可以使用绝对定位的伪元素“伪造”父元素的选择：

int[,] matrix = new int[1, 2];

.ab_section_element {
  position: relative;
}
.icon-grid:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid black;
  background-color: white;
  z-index: -1;
}

/* just for demonstration */
body {
  background: #ccc;
}

但是，这种方法要求子元素本身不应定位（非静态）。

Answer 3

这可以解决您的问题。

.ab_section_element .icon-grid:hover{
 border: 2px solid black;
 background-color: white;
}

在孩子的同时在css中塑造父母div

3 个答案: