javascript - Forse 一个 .class :hover 状态

Question

我想要做的是，当有人进入图像时，将: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>

标签： javascripthovermousehover

Answer 1

$(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 切换该类。