Forse .class: состояние при наведении

Question

Forse .class: состояние при наведении

1

То, что я хочу сделать, это то, что когда кто-то вводит изображение, которое заставляет состояние :hover в классе .right ниже самого изображения.

Любая помощь будет принята с благодарностью.

$(document).on('mouseover','img',function(){$(".right").hover();return false;});

.image{float:left;display:inline-block;width:20vw;margin:20px}
img{width:100%;cursor:pointer}
.right:after{content:"buy"}
.right:hover:after{content:"£2.50"}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=image>
<img src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png" alt="smile">
<div class=right></div>
</div>
<div class=image>
<img src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png" alt="smile">
<div class=right></div>
</div>

Federico 26 окт. 2018, в 12:55

Источник

0

вам не хватает кавычек для имен классов, используйте <div class="image">
Arun Kumar 26 окт. 2018, в 10:02
1

лучшим вариантом было бы добавить и удалить класс, который выполняет функцию наведения, а не играть с псевдо-классами.
Animesh Saraswat 26 окт. 2018, в 10:07
0

@ArunKumar это не обязательно, верно?
Federico 26 окт. 2018, в 10:08
1

@Federico обязательно для действительного HTML
Arun Kumar 26 окт. 2018, в 10:09

Показать ещё 2 комментария

Теги:

javascript

hover

mousehover

1 ответ

Ещё вопросы

вам не хватает кавычек для имен классов, используйте <div class="image">
лучшим вариантом было бы добавить и удалить класс, который выполняет функцию наведения, а не играть с псевдо-классами.
@Federico обязательно для действительного HTML

Sumesh TG · Answer 1 · 2018-10-26T07-55-00.000Z

$(document).on('mouseover','img',function(event){
$(".right").removeClass("hover");
$(this).parent().find(".right").toggleClass("hover");
return true;
});

.image{float:left;display:inline-block;width:20vw;margin:20px}
img{width:100%;cursor:pointer}
.right:after{content:"buy"}
.right:hover:after{content:"£2.50"}
.hover:after{content:"£2.50"}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
<img src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png" alt="smile">
<div class="right"></div>
</div>
<div class="image">
<img src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-10apkm4.png" alt="smile">
<div class="right"></div>
</div>

Попробуй это. Определите свою мышь над эффектом в классе с помощью CSS, затем переключите этот класс с помощью jquery.

это почти то, что я хочу, это то, что я хочу, чтобы только класс под изображением имел это состояние. Я пытаюсь работать с .closest, но пока ничего.
@Federico Пожалуйста, проверьте мой обновленный ответ.