Hover Item with JQuery
Is there a way to hover an element using javascript? I don't want to create another class, I just want to cause element to hover with javasc开发者_如何学Pythonript when my mouse pointer is not over that element.
For example I have 5 elements with the same class and I want to call hover on all of them when one of them is actually hovered.
I assume you mean the pseudo class :hover
that you've associated with a link (for example). As you hover over that link, you want to invoke all other link's :hover
styles.
Unfortunately, you can not invoke the :hover
styles from jQuery, that requires that you actually move your mouse pointer over that element. You have to use classes and utilize jQuery's hover event.
You can achieve this by addressing all of the items in your collection at the same time in your hover event handlers
var items = $(".some-class-applied-to-many-different-items");
items.hover(function() {
// Mouseover state
items.addClass("blah"); // <- for example
},
function() {
// Mouseout state
items.removeClass("blah");
});
If I understand your question correctly, you've added a hover
event using jQuery, and you'd like to trigger that event manually regardless of the mouse.
If I understood correctly, you want to call the mouseenter
to trigger the mouseenter
event.
If I've understood incorrectly, and you actually have a :hover
CSS rule which you'd like to trigger using Javascript, that's not possible.
Instead, you should add a class name to the rule (eg, something:hover, something.FakeHover { ... }
), and add that class name using jQuery. (eg, $(...).addClass('FakeHover')
).
In jQuery, the trigger
function allows you to trigger events (includingmouseover
, I believe) on elements.
In straight JavaScript, if you’ve assigned a function to an element’s event handler, you can of course call that whenever you want. E.g.
function mouseoverHandler() {
// Do something
}
// Assign function to element’s event handler
document.getElementById('link1').onmouseover = mouseoverHandler
// Call that function
document.getElementById('link1').onmouseover();
精彩评论