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
How can I simulate a mouseover event with jquery?
提问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
回答by jbabey
In CSS (which is what jQuery selectors are based on), .class1 .class2
means "an element with class2 that has an ancestor with class1". This is not what you want. You want .class1.class2
which 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();