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

Question

我正试图在＃boks2上空盘旋时触发悬停css。

我的jsfiddle：http://jsfiddle.net/u9byh/

我的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

您无法从jQuery触发CSS :hover。你可以做的是在另一个元素上切换一个类。像这样：

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

你可以在这里查看http://jsfiddle.net/Wc7MC/