将鼠标悬停在div父级之外的锚点链接上时，对div的悬停效果

Question

当anchor链接悬停时，我正在尝试scale一个包含background image的div。

我以前也见过类似的问题，就是这个问题。然而，这里的解决方案对我来说并不理想，因为当锚链接悬停时，我的悬停效果会触发(因此不能使用pointer-events(。

从本质上讲，当有人在.card__link上徘徊时，我想缩放.card__image。

我该怎么做？

.card__overflow {
overflow: hidden;
}
.card__image {
background-image: url("https://cdn.pixabay.com/photo/2017/05/01/13/01/vehicle-2275456_1280.jpg");
transition: all 0.5s ease;
height: 300px;
width: 300px;
background-size: cover;
background-repeat: no-repeat;
}
.card__link:hover {
color: orange;
text-decoration: underline;
}
.card__link:hover ~ .card__image {
transform: scale(1.2);
}

<div class="card">
<div class="card__overflow">
<div class="card__image"></div>
</div>
<div class="card__body">
<div class="card__action">
<a class="card__link" href="#">Learn more</a>
</div>
</div>
</div>

Answer 1

悬停的实际代码在css中应该是这样的——请检查已经进行的css更改——它是这样工作的。

.card__overflow {
overflow: hidden;
}
.card__image {
background-image: url("https://cdn.pixabay.com/photo/2017/05/01/13/01/vehicle-2275456_1280.jpg");
transition: all 0.5s ease;
height: 300px;
width: 300px;
background-size: cover;
background-repeat: no-repeat;
}
.card__link:hover {
color: orange;
text-decoration: underline;
}
.card__body:hover~.card__overflow {
transform: scale(1.2);
}

<div class="card">
<div class="card__body">
<div class="card__action">
<a class="card__link" href="#">Learn more</a>
</div>
</div>
<div class="card__overflow">
<div class="card__image"></div>
</div>
</div>

Answer 2

使用JS可以轻松完成。

const link = document.querySelector(".card__link");
const image = document.querySelector(".card__image");
link.addEventListener("mouseenter", () => {
image.classList.add("scale-up")
image.classList.remove("scale-down")
})
link.addEventListener("mouseleave", () => {
image.classList.remove("scale-up")
image.classList.add("scale-down")
})

.card__overflow {
overflow: hidden;
}
.card__image {
background-image: url("https://cdn.pixabay.com/photo/2017/05/01/13/01/vehicle-2275456_1280.jpg");
transition: all 0.5s ease;
height: 300px;
width: 300px;
background-size: cover;
background-repeat: no-repeat;
}
.card__link:hover {
color: orange;
text-decoration: underline;
}
.scale-up {
transform: scale(1.2);
}
.scale-down {
transform: scale(1);
}

<div class="card">
<div class="card__overflow">
<div class="card__image"></div>
</div>
<div class="card__body">
<div class="card__action">
<a class="card__link" href="#">Learn more</a>
</div>
</div>
</div>