Как применить эффект наведения мыши к двум наложенным изображениям?
У меня есть два изображения в одном div, одно над другим. Я хочу, чтобы эффект наведения мыши применялся к обоим изображениям, когда я навожу указатель мыши на изображение, а фоновое изображение будет отображаться с эффектом масштабирования. Но я обнаружил, что на наведение реагирует только тот, что сверху. Можно ли как-нибудь позволить обоим изображениям меняться одновременно?
<div class = "overlay transparent" onmousemove = "zoom(event)"
style = "background-image: url(https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg)">
<img src = "https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg" />
<img src = "https://media.nomadicmatt.com/2023/tropicalislandsfeature.jpg" />
</div>
<style>
div.transparent {
height: 150px;
width: 250px;
overflow: hidden;
cursor: zoom-in;
}
div.transparent img:hover {
opacity: 0;
}
div.transparent img {
transition: opacity 0.5s;
display: block;
width: 100%;
}
div.overlay {
position: relative;
display: inline-block;
}
div.overlay img:nth-child(1) {
position: relative;
object-fit: contain;
z-index: 1;
}
div.overlay img:nth-child(2) {
position: absolute;
object-fit: contain;
top: 0;
left: 0;
z-index: 2;
}
</style>
<script>
function zoom(e) {
var zoomer = e.currentTarget;
e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
x = offsetX / zoomer.offsetWidth * 100
y = offsetY / zoomer.offsetHeight * 100
zoomer.style.backgroundPosition = x + '% ' + y + '%';
}
</script>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать псевдокласс :has.
- Узнайте больше: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
- Могу ли я использовать: https://caniuse.com/css-has
Обновлено: в этом случае вы можете использовать только псевдокласс :hover.
<div class = "overlay transparent" style = "background-image: url(https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg)">
<img src = "https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg" />
<img src = "https://media.nomadicmatt.com/2023/tropicalislandsfeature.jpg" />
</div>
<style>
div.transparent {
height: 150px;
width: 250px;
overflow: hidden;
}
/* div.transparent:has(img:hover) img{*/
div.transparent:hover img{
opacity: 0;
}
div.transparent img {
display: block;
width: 100%;
transition: opacity 0.5s;
}
div.overlay {
position: relative;
display: inline-block;
}
div.overlay img:nth-child(1) {
position: relative;
object-fit: contain;
z-index: 1;
}
div.overlay img:nth-child(2) {
position: absolute;
object-fit: contain;
top: 0;
left: 0;
z-index: 2;
}
</style>@SamTest нет проблем, код обновлен
Эффекты при наведении возникают, когда вы наводите курсор на элемент, и я вижу, что вы поместили псевдокласс :hover в элемент <img />. Поскольку вы наложили один элемент img на другой, ваша мышь распознает элемент сверху (с большим z-индексом), как только вы наводите на него курсор, оставляя элемент позади нетронутым. Если вы хотите добиться результата, при котором в этом случае на оба изображения будет воздействовать эффект наведения, рассмотрите возможность добавления псевдо- :hover к родительскому элементу div, а затем внесите изменения при наведении на изображения.
<div class = "overlay transparent">
<img src = "https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg" />
<img src = "https://media.nomadicmatt.com/2023/tropicalislandsfeature.jpg" />
</div>
<style>
div.transparent {
height: 150px;
width: 250px;
overflow: hidden;
background-color:red;
}
div.transparent:hover{
img {
opacity: 0;
}
}
div.transparent img {
transition: opacity 0.5s;
display: block;
width: 100%;
}
div.overlay {
position: relative;
display: inline-block;
}
div.overlay img:nth-child(1) {
position: relative;
object-fit: contain;
z-index: 1;
}
div.overlay img:nth-child(2) {
position: absolute;
object-fit: contain;
top: 0;
left: 0;
z-index: 2;
}
</style>
Привет, спасибо за ваш ответ! Я должен был опубликовать свою полную функцию. На самом деле я хочу скрыть два изображения, а затем отобразить фоновое изображение, установка прозрачности div приведет к исчезновению фонового изображения. Я обновил свой код.
ну да, вам не нужно делать div прозрачным, если вы хотите, чтобы фоновое изображение отображалось, поскольку оно все еще является частью div. но вы можете добавить в div псевдокласс :hover и указать элементы внутри него, для которых вы хотите изменить стиль.
Спасибо! Я думаю, что @SioGabx - более элегантный подход :)
Привет, спасибо за ваш ответ! Я должен был опубликовать свою полную функцию. На самом деле я хочу скрыть два изображения, а затем отобразить фоновое изображение, используя :has, чтобы фоновое изображение тоже исчезло. Я обновил свой код, чтобы показать, чего именно я хочу достичь.