背景颜色悬停淡化效果答案

【问题标题】：background color hover fade effects背景颜色悬停淡化效果
【发布时间】：2014-07-24 22:59:15
【问题描述】：

使用这个 css 代码

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

我希望当我将鼠标移离对象 (#onec-fourth) 时，用于背景颜色和颜色文本将持续 1 秒。

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

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

【问题讨论】：

我假设英语不是您的第一语言？您的意思是想让background-color 在鼠标离开元素后保持着色一秒钟？
如果我理解你的问题，然后使用间隔。
jsfiddle.net/8eBvj.. 这个小提琴可能会给你一个想法

标签： html css

【解决方案1】：

这种任务可以通过简单的CSStransition轻松实现，不需要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

（在:hover 上使用transition: all 1s linear 1s 和transition: all 0s linear 0s）：
随意使用transition-duration 和transition-delay 值，直到获得最佳结果。

有关 CSS 过渡的更多信息，请访问 MDN

【讨论】：

@user3706524 不客气。如果此答案有用，您可以投票和/或将其标记为已接受。
这里是代码jsfiddle.net/96jYZ/1。我希望它变暗，变得像背景的颜色，而不是越来越亮。

【解决方案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()。查看链接了解更多详情。

【讨论】：

【解决方案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。

【讨论】：

【解决方案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/

【讨论】：