Hover Item with JQuery

Question

Is there a way to hover item using javascript? I don't want to create another class, I just want to hover item with javascript when my mouse pointer is not over this item.

For example I have 5 items with the same class and I want to call hover on all of them when one of them is actually hovered.

Thanks.

Answer 1

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')).

Answer 2

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();

Answer 3

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.

Answer 4

How about adding a parent div with the same class or what?

<div class="thisclass">
<ul>
  <li class="thisclass">Some text</li>
  <li class="thisclass">Some text</li>
  <li class="thisclass">Some text</li>
  <li class="thisclass">Some text</li>
  <li class="thisclass">Some text</li>
</ul>
</div>
<script type="text/javascript">

$('div.thisclass').hover(function(){
  /* do what you want to do with the 5 children when mouse is on it */
},function(){
  /* do what you want to do with the 5 children when mouse goes out */
});

</script>

Answer 5

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");
});