持續高亮

Question

我想突出顯示一個使用jquery的dom對象。我發現使用effect從jQuery用戶界面的方式：

$('#foo').hover(function(){$('#bar').effect("highlight");}); 

但這生效，只有當輸入/輸出將鼠標移動到#foo。我希望效果在鼠標結束時保持#foo，並在鼠標離開時返回到之前的狀態。我試過了，這個：

$('#foo').mouseover(function(){$('#bar').effect("highlight");}); 

但還是不行。我如何使效果持續下去？

Answer 1

您可以使用mouseenter和mouseleave添加效果以向您的元素添加類。 樣品： HTML：

<div id="foo"> 
    <p>Hello world</p> 
</div> 

JS：

$('#foo').mouseenter(function(){$(this).addClass("highlight");}); 
$('#foo').mouseleave(function(){$(this).removeClass("highlight");}); 

CSS：

.highlight{ 
    background-color: red; 
} 

提琴手： http://jsfiddle.net/2CL7u/

您也可以與純HTML和CSS這樣的效果像這樣： HTML：

<div id="foo"> 
    <p>Hello world</p> 
</div> 

CSS：

#foo:hover{ 
    background-color: red; 
} 

提琴手： http://jsfiddle.net/7Qq7n/

Answer 2

您需要（使用的setTimeout）是開/關

var hInterval = null; 

$('#foo').on({ 
    'mouseenter': function(){ 
     hInterval = setTimeout(function highlight(){ 
     $('#bar').effect("highlight", function(){ hInterval = setTimeout(highlight, 100); }); 
     }, 100); 
    }, 
    'mouseleave': function(){ 
     clearTimeout(hInterval); 
    } 
}); 

Answer 3

您可以切換的時間間隔還使用animation保存UI顏色轉換在顏色之間切換時使用的動畫。

$('#foo').mouseover(function(){ 
    $(this).animate({ 
     backgroundColor: "#ffff99" 
    },'fast'); 
}); 

$('#foo').mouseleave(function(){ 
    $(this).animate({ 
     backgroundColor: "#ffffff" 
    },'fast'); 
}); 

JS FIDDLE

jq UI color animation demo