Question

我想使用jquery突出显示一个dom对象。我发现了一种使用来自jquery ui的effect的方法：

$('#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;
}

的Fiddler： http://jsfiddle.net/2CL7u/

您也可以使用纯HTML和CSS来实现此效果，如下所示： HTML：

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

CSS：

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

的Fiddler： 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

保持亮点

3 个答案: