Question

使用此css代码

#onec-fourth:hover {
  background-color: #F36DE1;
  color: white;
}

当我将鼠标移离对象（#onec-fourth）时，我想要这样做，用于背景颜色和颜色文本将持续1秒钟。

因为现在，当我将鼠标移开时，它会停止。

如何使:hover效果持续时间很短？

Answer 1

使用简单的CSS transition可以很容易地实现这种任务，不需要Javascript（除非您需要支持旧浏览器，但基本效果无论如何都会有效）：

示例：http://codepen.io/anon/pen/nzLkf（在Firefox29和Chrome35上测试）

CSS代码

#onec-fourth {
  width: 300px;
  height: 300px;
  border: 2px dashed #ddd;
  -webkit-transition: all 0s linear 1s;
  -moz-transition: all 0s linear 1s;
  -ms-transition: all 0s linear 1s;
  transition: all 0s linear 1s;
 }

#onec-fourth:hover{
  background-color:#F36DE1;
  color:white;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
}

对于淡出效果（1秒后），请参阅http://codepen.io/anon/pen/AkCcm

（在transition: all 1s linear 1s上使用transition: all 0s linear 0s和:hover）：
只需使用transition-duration和transition-delay值，您就可以获得最佳效果。

有关CSS过渡的更多信息，请参阅MDN

Answer 2

<强> Demo Fiddle

var self;
$('#onec-fourth').mouseover(function(){
    self = $(this);
    self.css('background-color','red');
}).mouseleave(function(){

    setTimeout(function(){
       self.css('background-color','blue');
    },1000);
});

使用jQuery setTimeout() ， mouseover() 和 mouseleave() 。查看链接以获取更多详细信息。

Answer 3

作为可能对您有所帮助的技术的简单演示：

#onec-fourth {
    background-color: #fff;
    /* vendor prefixes stripped for brevity;
       sets the transition for the background-color property: */
    transition: background-color 1s linear; 
    transition-delay: 1s; /* delays that transition for 1 second */
}

#onec-fourth:hover {
    background-color: #ffa;
}

JS Fiddle demo

参考文献：

CSS transitions。
transition-delay。

Answer 4

如果你想要应用更多的样式，你可以使用addClass / removeClass：

<style>
.hov {
  background-color:#F36DE1;
  color:white;
}
</style>

和jquery代码：

<script>
$(document).ready(function () {
$("#onec-fourth").mouseenter(function () {
   $("#onec-fourth").addClass("hov");
});
$("#onec-fourth").mouseleave(function () {
   setTimeout(function () {
    $("#onec-fourth").removeClass("hov");
   }, 1000);
});
});
</script>

http://jsfiddle.net/6zSJa/8/

背景颜色悬停淡入淡出效果

4 个答案: