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

My jsfiddle: /

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

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

My jsfiddle: http://jsfiddle/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();   
    });
});

• javascript
• jquery

Share Improve this question Follow edited Dec 24, 2012 at 6:52 Yoav Kadosh 5,19544 gold badges4444 silver badges5858 bronze badges asked Oct 24, 2011 at 6:44 Rails beginnerRails beginner 14.5k3535 gold badges140140 silver badges259259 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

http://jsfiddle/jordanbaucke/buyC9/3/

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

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

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

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