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();
});
});
You can't trigger the CSS :hover from jQuery. What you could do is to toggle a class on the other element. Like this:
#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;}
$(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.net/Wc7MC/
