javascript 如何使用 jquery 模拟鼠标悬停事件?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14246524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 21:08:05  来源:igfitidea点击:

How can I simulate a mouseover event with jquery?

javascriptjquery

提问by Paul

I have a star rating system as defined like this:

我有一个如下定义的星级评分系统:

<span class="rating_container"> 
    <span class="star_container">  
        <a rel="nofollow" href="" class="star star_1" >1<span class="rating">Terrible</span></a>   
        <a rel="nofollow" href="" class="star star_2" >2<span class="rating">Bad</span></a>
        <a rel="nofollow" href="" class="star star_3" >3<span class="rating">Bad</span></a>
        <a rel="nofollow" href="" class="star star_4" >4<span class="rating">OK</span></a>   
        <a rel="nofollow" href="" class="star star_5" >5<span class="rating">OK</span></a>   
        <a rel="nofollow" href="" class="star star_6" >6<span class="rating">OK</span></a>   
        <a rel="nofollow" href="" class="star star_7" >7<span class="rating">Good</span></a>   
        <a rel="nofollow" href="" class="star star_8" >8<span class="rating">Good</span></a>   
        <a rel="nofollow" href="" class="star star_9" >9<span class="rating">Excellent</span></a>   
        <a rel="nofollow" href="" class="star star_10" >10<span class="rating">Excellent</span></a>  
    </span> 
</span> 

Each individual star is colored when a mouseover happens. How can I simulate this with jquery? For instance I'd like to mouseover star 5. This is what I've tried:

当鼠标悬停发生时,每个单独的星星都会被着色。我如何用 jquery 模拟这个?例如,我想将鼠标悬停在第 5 颗星上。这是我尝试过的:

     $('.star.star_5').addClass('active');

What am I missing?

我错过了什么?

回答by Beetroot-Beetroot

Try :

尝试 :

$(".star_5").trigger('mouseover');

This will trigger the mouseover action whatever it happens to be, rather than emulating it, offering a measure of future-proofing against changes to the mouseover handler.

这将触发鼠标悬停操作,无论它发生什么,而不是模拟它,提供了一种针对鼠标悬停处理程序更改的未来证明措施。

回答by Selvakumar Arumugam

I think what you need is

我想你需要的是

$('.star.star_5').addClass('active');

Notethe no-space between .starand .star_5and the _in star_5. (Thanks @wirey)

注意.starand.star_5_in之间没有空格star_5。(感谢@wirey

回答by jbabey

In CSS (which is what jQuery selectors are based on), .class1 .class2means "an element with class2 that has an ancestor with class1". This is not what you want. You want .class1.class2which means "an element with both class1 and class2":

在 CSS(这是 jQuery 选择器的基础)中,.class1 .class2意思是“一个具有 class2 的元素,它有一个具有 class1 的祖先”。这不是你想要的。你想要.class1.class2这意味着“一个元素同时具有 class1 和 class2”:

$('.star.star_5').addClass('active');

回答by lethal-guitar

In case you really want to simulate an event: You can trigger JavaScript events using parameterless forms of the corresponding jQuery functions. For example:

如果您真的想模拟一个事件:您可以使用相应 jQuery 函数的无参数形式触发 JavaScript 事件。例如:

$('.star.star_5').mouseover();