提问者:小点点

CSS悬停在div上只触发子元素?[副本]


我有一个div在这个div是一个图像和一个标签。我希望如果我悬停在div上,图像的边框颜色会改变,但它不起作用。只有当我直接悬停在图像上时,边框颜色才会改变。你能帮我吗?

null

    .item {
       display: flex;
       flex-direction: column;
       align-items: center;
       margin: 0 10px;
    }

    .item:hover {
       border-color: @textColor;
    }

    .item img {
       border: transparent 4px solid;
       border-radius: 20%;
       padding: 5px;
       width: 120px;
      height: 120px;
    }
    <div class="item">
        <img src="https://via.placeholder.com/120">
        <label>Transfer</label>
    </div>

null


共1个答案

匿名用户

使用。item:hover img而不是。item:hover:

null

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
}

.item:hover img {
  border-color: red;
}

.item img {
  border: transparent 4px solid;
  border-radius: 20%;
  padding: 5px;
  width: 120px;
  height: 120px;
}
<div class="item">
  <img src="https://via.placeholder.com/120">
  <label>Transfer</label>
</div>