jquery - 持续亮点

Question

我想使用 jquery 突出显示一个 dom 对象。effect我从 jquery ui中找到了一种使用方法：

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

You can also use animation to save the UI color transfer animation when changing between colors.

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

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

JS FIDDLE

jq UI color animation demo