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

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

0 голосов
/ 26 октября 2018

То, что я хочу сделать, - это когда кто-то вводит изображение, которое вынуждает состояние :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>

1 Ответ

0 голосов
/ 26 октября 2018 

$(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.

...