预测.class：hover状态

Question

我想做的是，当有人输入图像时，迫使const arr = [{name: 'example1', quantity: 2},{name: 'example2', quantity: 3},{name: 'example3', quantity: 5}] var result = arr.some(e => e.hasOwnProperty('name') && e.hasOwnProperty('quantity')); console.log("The array contains an object with a 'name' and 'quantity' property: " + result); 状态进入图像本身下方的: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"}

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