在mouseenter事件上生成背景颜色 [英] Animate background-color on mouseenter event

问题描述

我想让它，当鼠标进入 .container 元素 background-color #facial 元素会从蓝色缓慢转换为白色。

我读过必须使用jQuery的 .animate（）函数来实现这一点。

似乎不工作。我在论坛上阅读了你需要的东西叫JQuery UI，但那些帖子是更老的。我也没有看到这个选项在我的JsFiddle。任何人知道为什么这个脚本不工作？

  $（document）.ready（function（）{
 
 $（'。container'） .mouseenter（function（）{
 $（'＃facial'）。animate（{backgroundColor：'＃ffffff'}，'slow'）; 
}）; 
}）; 
  

JsFiddle链接

解决方案

尝试使用 css ：hover ，现有转换属性设置为 8.5s

#test_box {height：50px; width：50px;背景：红色; transition：background 2s ease;}＃test_box：hover {background：green;} body {background-color：＃d6d6d6;} container {margin：200px auto; background-color：red; width：478px; height：200px;}＃facial {float：right; width：239px; height：200px;背景：＃008aaf; transition：background 8.5s ease;}＃facial h1，＃facial h2 {text-align：center; margin-top：30px; color：#FFFFFF;}。container：hover> #facial {background：#fff;}

 < div class =container> < img src =http://s23.postimg.org/enn2yyh7v/Facial.jpg/> < div id =facial> < h1>面部< / h1> < h2>营销材料< / h2> < / div> < div id =test_box> ...< / div>< / div>  

jsfiddle http://jsfiddle.net/b008nczk/32/

I'm trying to have it so that when the mouse enters the .container elements the background-color of #facial element slowly transitions to white from blue.

I've read that you have to use jQuery's .animate() function to achieve this.

It doesn't seem to work. I've read on the forums you need something called JQuery UI, but those posts were older. I also do not see this option within my JsFiddle. Anybody know why this script is not working?

$(document).ready(function(){

$('.container').mouseenter(function(){
    $('#facial').animate({backgroundColor:'#ffffff'},'slow');
    });
});     

JsFiddle Link

解决方案

Try utilizing css :hover , existing transition property set to 8.5s

#test_box {
  height: 50px;
  width: 50px;
  background: red;
  transition: background 2s ease;
}
#test_box:hover {
  background: green;
}
body {
  background-color: #d6d6d6;
}
.container {
  margin: 200px auto;
  background-color: red;
  width: 478px;
  height: 200px;
}
#facial {
  float: right;
  width: 239px;
  height: 200px;
  background: #008aaf;
  transition: background 8.5s ease;
}
#facial h1,
#facial h2 {
  text-align: center;
  margin-top: 30px;
  color: #FFFFFF;
}
.container:hover > #facial {
  background: #fff;
}

<div class="container">
  <img src="http://s23.postimg.org/enn2yyh7v/Facial.jpg" />
  <div id="facial">
    <h1>Facial</h1>
    <h2>Marketing Material</h2> 
  </div>

  <div id="test_box">...</div>
</div>

jsfiddle http://jsfiddle.net/b008nczk/32/

这篇关于在mouseenter事件上生成背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！