悬停在另一个元素上时如何触发悬停

Question

I am trying to trigger the hover css also when hovered over #boks2.

My jsfiddle: http://jsfiddle.net/u9byh/

My HTML:

<div id="boks1"></div>
<div id="boks2"></div>

CSS:

#boks1 {width:50px;height:50px;background:blue;}
#boks1:hover {background:red;}
#boks2 {width:50px;height:50px;border:1px solid black;margin-top:10px;}

Jquery:

$(jQuery){
    $('#boks2').hover(function() {
        $('#boks1').hover();   
    });
});

Answer 1

You can't trigger the CSS :hover from jQuery. What you could do is to toggle a class on the other element. Like this:

CSS

#boks1 {width:50px;height:50px;background:blue;}
#boks1.onHover, #boks1:hover {background:red;}
#boks2 {width:50px;height:50px;border:1px solid black;margin-top:10px;}

jQuery

$(function() { //on dom ready handler fixed as Sarfraz pointed out
    $('#boks2').hover(function() {
       $('#boks1').toggleClass('onHover');   
    });
 });
});

Answer 2

http://jsfiddle.net/jordanbaucke/buyC9/3/

Answer 3

$('#boks2').hover(function() {
     $('#boks1').trigger('hover');   
});

$('#boks1').bind('hover',function(){
     $(this).css('background-color','red');
})

u can check here http://jsfiddle.net/Wc7MC/