两个类之间的动画颜色答案

【问题标题】：Animate color between two class两个类之间的动画颜色
【发布时间】：2018-04-26 07:43:13
【问题描述】：

我想在鼠标离开方块后通过动画将颜色从灰色渐变为粉红色。

但是我尝试在两个类之间制作动画，但似乎不起作用。

任何帮助将不胜感激。

$('.blocks').mouseenter(function(){
		$(this).addClass('current');
		setTimeout(function(){
			//$(this).animate('.current',null); //this line is not working
		},1500);
	});

.playboard{
		width: 330px;
	}
	.blocks
	{
		display: inline-block;
		width: 30px;
		height: 30px;
		background-color:pink;

	}
	.blocks.current{
		background-color:grey;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="playboard"><div class="blocks" data-x="0" data-y="0"></div><div class="blocks" data-x="0" data-y="1"></div><div class="blocks" data-x="0" data-y="2"></div><div class="blocks" data-x="0" data-y="3"></div><div class="blocks" data-x="0" data-y="4"></div><div class="blocks" data-x="0" data-y="5"></div><div class="blocks" data-x="0" data-y="6"></div><div class="blocks" data-x="0" data-y="7"></div><div class="blocks" data-x="0" data-y="8"></div><div class="blocks" data-x="0" data-y="9"></div><div class="blocks" data-x="0" data-y="10"></div><div class="blocks" data-x="1" data-y="0"></div><div class="blocks" data-x="1" data-y="1"></div><div class="blocks" data-x="1" data-y="2"></div><div class="blocks" data-x="1" data-y="3"></div><div class="blocks" data-x="1" data-y="4"></div><div class="blocks" data-x="1" data-y="5"></div><div class="blocks" data-x="1" data-y="6"></div><div class="blocks" data-x="1" data-y="7"></div><div class="blocks" data-x="1" data-y="8"></div><div class="blocks" data-x="1" data-y="9"></div><div class="blocks" data-x="1" data-y="10"></div><div class="blocks" data-x="2" data-y="0"></div><div class="blocks" data-x="2" data-y="1"></div><div class="blocks" data-x="2" data-y="2"></div><div class="blocks" data-x="2" data-y="3"></div><div class="blocks" data-x="2" data-y="4"></div><div class="blocks" data-x="2" data-y="5"></div><div class="blocks" data-x="2" data-y="6"></div><div class="blocks" data-x="2" data-y="7"></div><div class="blocks" data-x="2" data-y="8"></div><div class="blocks" data-x="2" data-y="9"></div><div class="blocks" data-x="2" data-y="10"></div><div class="blocks" data-x="3" data-y="0"></div><div class="blocks" data-x="3" data-y="1"></div><div class="blocks" data-x="3" data-y="2"></div><div class="blocks" data-x="3" data-y="3"></div><div class="blocks" data-x="3" data-y="4"></div><div class="blocks" data-x="3" data-y="5"></div><div class="blocks" data-x="3" data-y="6"></div><div class="blocks" data-x="3" data-y="7"></div><div class="blocks" data-x="3" data-y="8"></div><div class="blocks" data-x="3" data-y="9"></div><div class="blocks" data-x="3" data-y="10"></div><div class="blocks" data-x="4" data-y="0"></div><div class="blocks" data-x="4" data-y="1"></div><div class="blocks" data-x="4" data-y="2"></div><div class="blocks" data-x="4" data-y="3"></div><div class="blocks" data-x="4" data-y="4"></div><div class="blocks" data-x="4" data-y="5"></div><div class="blocks" data-x="4" data-y="6"></div><div class="blocks" data-x="4" data-y="7"></div><div class="blocks" data-x="4" data-y="8"></div><div class="blocks" data-x="4" data-y="9"></div><div class="blocks" data-x="4" data-y="10"></div><div class="blocks" data-x="5" data-y="0"></div><div class="blocks" data-x="5" data-y="1"></div><div class="blocks" data-x="5" data-y="2"></div><div class="blocks" data-x="5" data-y="3"></div><div class="blocks" data-x="5" data-y="4"></div><div class="blocks" data-x="5" data-y="5"></div><div class="blocks" data-x="5" data-y="6"></div><div class="blocks" data-x="5" data-y="7"></div><div class="blocks" data-x="5" data-y="8"></div><div class="blocks" data-x="5" data-y="9"></div><div class="blocks" data-x="5" data-y="10"></div><div class="blocks" data-x="6" data-y="0"></div><div class="blocks" data-x="6" data-y="1"></div><div class="blocks" data-x="6" data-y="2"></div><div class="blocks" data-x="6" data-y="3"></div><div class="blocks" data-x="6" data-y="4"></div><div class="blocks" data-x="6" data-y="5"></div><div class="blocks" data-x="6" data-y="6"></div><div class="blocks" data-x="6" data-y="7"></div><div class="blocks" data-x="6" data-y="8"></div><div class="blocks" data-x="6" data-y="9"></div><div class="blocks" data-x="6" data-y="10"></div><div class="blocks" data-x="7" data-y="0"></div><div class="blocks" data-x="7" data-y="1"></div><div class="blocks" data-x="7" data-y="2"></div><div class="blocks" data-x="7" data-y="3"></div><div class="blocks" data-x="7" data-y="4"></div><div class="blocks" data-x="7" data-y="5"></div><div class="blocks" data-x="7" data-y="6"></div><div class="blocks" data-x="7" data-y="7"></div><div class="blocks" data-x="7" data-y="8"></div><div class="blocks" data-x="7" data-y="9"></div><div class="blocks" data-x="7" data-y="10"></div><div class="blocks" data-x="8" data-y="0"></div><div class="blocks" data-x="8" data-y="1"></div><div class="blocks" data-x="8" data-y="2"></div><div class="blocks" data-x="8" data-y="3"></div><div class="blocks" data-x="8" data-y="4"></div><div class="blocks" data-x="8" data-y="5"></div><div class="blocks" data-x="8" data-y="6"></div><div class="blocks" data-x="8" data-y="7"></div><div class="blocks" data-x="8" data-y="8"></div><div class="blocks" data-x="8" data-y="9"></div><div class="blocks" data-x="8" data-y="10"></div><div class="blocks" data-x="9" data-y="0"></div><div class="blocks" data-x="9" data-y="1"></div><div class="blocks" data-x="9" data-y="2"></div><div class="blocks" data-x="9" data-y="3"></div><div class="blocks" data-x="9" data-y="4"></div><div class="blocks" data-x="9" data-y="5"></div><div class="blocks" data-x="9" data-y="6"></div><div class="blocks" data-x="9" data-y="7"></div><div class="blocks" data-x="9" data-y="8"></div><div class="blocks" data-x="9" data-y="9"></div><div class="blocks" data-x="9" data-y="10"></div><div class="blocks" data-x="10" data-y="0"></div><div class="blocks" data-x="10" data-y="1"></div><div class="blocks" data-x="10" data-y="2"></div><div class="blocks" data-x="10" data-y="3"></div><div class="blocks" data-x="10" data-y="4"></div><div class="blocks" data-x="10" data-y="5"></div><div class="blocks" data-x="10" data-y="6"></div><div class="blocks" data-x="10" data-y="7"></div><div class="blocks" data-x="10" data-y="8"></div><div class="blocks" data-x="10" data-y="9"></div><div class="blocks" data-x="10" data-y="10"></div></div>

【问题讨论】：

动画还是动画？
也许是个愚蠢的评论，但 aniamate 不应该是 animate 吗？
抱歉，有错别字。
@Wils Sorry 如 现在一切正常，或 Sorry 如 错字已修复我还是有同样的问题？
@PeterAbolins 是的，问题仍然存在。

标签： javascript jquery jquery-animate

【解决方案1】：

这是你想要的吗？

演示

$('.blocks').mouseenter(function() {
  var $this = $(this);
  $this.addClass('current');
  setTimeout(function() {
    $this.addClass("Done")
  }, 1900);
});

.playboard {
  width: 330px;
}

.blocks {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: pink;
}

.blocks.current:not(.Done) {
  background-color: grey;
  animation-name: blackWhite;
  animation-duration: 2s;
}

@-webkit-keyframes blackWhite {
  0% {
    background-color: grey;
  }
  50% {
    background-color: grey;
  }
  51% {
    background-color: grey;
  }
  100% {
    background-color: pink;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="playboard">
  <div class="blocks" data-x="0" data-y="0"></div>
  <div class="blocks" data-x="0" data-y="1"></div>
  <div class="blocks" data-x="0" data-y="2"></div>
  <div class="blocks" data-x="0" data-y="3"></div>
  <div class="blocks" data-x="0" data-y="4"></div>
  <div class="blocks" data-x="0" data-y="5"></div>
  <div class="blocks" data-x="0" data-y="6"></div>
  <div class="blocks" data-x="0" data-y="7"></div>
  <div class="blocks" data-x="0" data-y="8"></div>
  <div class="blocks" data-x="0" data-y="9"></div>
  <div class="blocks" data-x="0" data-y="10"></div>
  <div class="blocks" data-x="1" data-y="0"></div>
  <div class="blocks" data-x="1" data-y="1"></div>
  <div class="blocks" data-x="1" data-y="2"></div>
  <div class="blocks" data-x="1" data-y="3"></div>
  <div class="blocks" data-x="1" data-y="4"></div>
  <div class="blocks" data-x="1" data-y="5"></div>
  <div class="blocks" data-x="1" data-y="6"></div>
  <div class="blocks" data-x="1" data-y="7"></div>
  <div class="blocks" data-x="1" data-y="8"></div>
  <div class="blocks" data-x="1" data-y="9"></div>
  <div class="blocks" data-x="1" data-y="10"></div>
  <div class="blocks" data-x="2" data-y="0"></div>
  <div class="blocks" data-x="2" data-y="1"></div>
  <div class="blocks" data-x="2" data-y="2"></div>
  <div class="blocks" data-x="2" data-y="3"></div>
  <div class="blocks" data-x="2" data-y="4"></div>
  <div class="blocks" data-x="2" data-y="5"></div>
  <div class="blocks" data-x="2" data-y="6"></div>
  <div class="blocks" data-x="2" data-y="7"></div>
  <div class="blocks" data-x="2" data-y="8"></div>
  <div class="blocks" data-x="2" data-y="9"></div>
  <div class="blocks" data-x="2" data-y="10"></div>
  <div class="blocks" data-x="3" data-y="0"></div>
  <div class="blocks" data-x="3" data-y="1"></div>
  <div class="blocks" data-x="3" data-y="2"></div>
  <div class="blocks" data-x="3" data-y="3"></div>
  <div class="blocks" data-x="3" data-y="4"></div>
  <div class="blocks" data-x="3" data-y="5"></div>
  <div class="blocks" data-x="3" data-y="6"></div>
  <div class="blocks" data-x="3" data-y="7"></div>
  <div class="blocks" data-x="3" data-y="8"></div>
  <div class="blocks" data-x="3" data-y="9"></div>
  <div class="blocks" data-x="3" data-y="10"></div>
  <div class="blocks" data-x="4" data-y="0"></div>
  <div class="blocks" data-x="4" data-y="1"></div>
  <div class="blocks" data-x="4" data-y="2"></div>
  <div class="blocks" data-x="4" data-y="3"></div>
  <div class="blocks" data-x="4" data-y="4"></div>
  <div class="blocks" data-x="4" data-y="5"></div>
  <div class="blocks" data-x="4" data-y="6"></div>
  <div class="blocks" data-x="4" data-y="7"></div>
  <div class="blocks" data-x="4" data-y="8"></div>
  <div class="blocks" data-x="4" data-y="9"></div>
  <div class="blocks" data-x="4" data-y="10"></div>
  <div class="blocks" data-x="5" data-y="0"></div>
  <div class="blocks" data-x="5" data-y="1"></div>
  <div class="blocks" data-x="5" data-y="2"></div>
  <div class="blocks" data-x="5" data-y="3"></div>
  <div class="blocks" data-x="5" data-y="4"></div>
  <div class="blocks" data-x="5" data-y="5"></div>
  <div class="blocks" data-x="5" data-y="6"></div>
  <div class="blocks" data-x="5" data-y="7"></div>
  <div class="blocks" data-x="5" data-y="8"></div>
  <div class="blocks" data-x="5" data-y="9"></div>
  <div class="blocks" data-x="5" data-y="10"></div>
  <div class="blocks" data-x="6" data-y="0"></div>
  <div class="blocks" data-x="6" data-y="1"></div>
  <div class="blocks" data-x="6" data-y="2"></div>
  <div class="blocks" data-x="6" data-y="3"></div>
  <div class="blocks" data-x="6" data-y="4"></div>
  <div class="blocks" data-x="6" data-y="5"></div>
  <div class="blocks" data-x="6" data-y="6"></div>
  <div class="blocks" data-x="6" data-y="7"></div>
  <div class="blocks" data-x="6" data-y="8"></div>
  <div class="blocks" data-x="6" data-y="9"></div>
  <div class="blocks" data-x="6" data-y="10"></div>
  <div class="blocks" data-x="7" data-y="0"></div>
  <div class="blocks" data-x="7" data-y="1"></div>
  <div class="blocks" data-x="7" data-y="2"></div>
  <div class="blocks" data-x="7" data-y="3"></div>
  <div class="blocks" data-x="7" data-y="4"></div>
  <div class="blocks" data-x="7" data-y="5"></div>
  <div class="blocks" data-x="7" data-y="6"></div>
  <div class="blocks" data-x="7" data-y="7"></div>
  <div class="blocks" data-x="7" data-y="8"></div>
  <div class="blocks" data-x="7" data-y="9"></div>
  <div class="blocks" data-x="7" data-y="10"></div>
  <div class="blocks" data-x="8" data-y="0"></div>
  <div class="blocks" data-x="8" data-y="1"></div>
  <div class="blocks" data-x="8" data-y="2"></div>
  <div class="blocks" data-x="8" data-y="3"></div>
  <div class="blocks" data-x="8" data-y="4"></div>
  <div class="blocks" data-x="8" data-y="5"></div>
  <div class="blocks" data-x="8" data-y="6"></div>
  <div class="blocks" data-x="8" data-y="7"></div>
  <div class="blocks" data-x="8" data-y="8"></div>
  <div class="blocks" data-x="8" data-y="9"></div>
  <div class="blocks" data-x="8" data-y="10"></div>
  <div class="blocks" data-x="9" data-y="0"></div>
  <div class="blocks" data-x="9" data-y="1"></div>
  <div class="blocks" data-x="9" data-y="2"></div>
  <div class="blocks" data-x="9" data-y="3"></div>
  <div class="blocks" data-x="9" data-y="4"></div>
  <div class="blocks" data-x="9" data-y="5"></div>
  <div class="blocks" data-x="9" data-y="6"></div>
  <div class="blocks" data-x="9" data-y="7"></div>
  <div class="blocks" data-x="9" data-y="8"></div>
  <div class="blocks" data-x="9" data-y="9"></div>
  <div class="blocks" data-x="9" data-y="10"></div>
  <div class="blocks" data-x="10" data-y="0"></div>
  <div class="blocks" data-x="10" data-y="1"></div>
  <div class="blocks" data-x="10" data-y="2"></div>
  <div class="blocks" data-x="10" data-y="3"></div>
  <div class="blocks" data-x="10" data-y="4"></div>
  <div class="blocks" data-x="10" data-y="5"></div>
  <div class="blocks" data-x="10" data-y="6"></div>
  <div class="blocks" data-x="10" data-y="7"></div>
  <div class="blocks" data-x="10" data-y="8"></div>
  <div class="blocks" data-x="10" data-y="9"></div>
  <div class="blocks" data-x="10" data-y="10"></div>
</div>

这将在 1.5 秒后删除 current 类。

$('.blocks').mouseenter(function() {
  var $this = $(this);
  $this.addClass('current');
  setTimeout(function() {
    $this.removeClass("current")
  }, 2000);
});

与它结合，让它随着时间的推移变成多种颜色。

.blocks.current {
  background-color: grey;
  animation-name: blackWhite;
  animation-duration: 2s;
}

@-webkit-keyframes blackWhite {
  0% {
    background-color: white;
  }
  50% {
    background-color: blue;
  }
  51% {
    background-color: grey;
  }
  100% {
    background-color: pink;
  }
}

【讨论】：

谢谢！但是是否可以让颜色从一个类动画到另一个类。
确实很好看，但是动画之后好像又播放了一个动画。我应该如何让灰色变回粉红色并保持粉红色。
@Wils 你只想让动画运行一次吗？
@Wils 我想我不明白你希望从 mouseenter 开始到结束时 100% 发生什么。我已经更改了代码，所以你只能运行一次动画
你非常接近预期的结果。动画后只有灰色似乎闪烁一次。

【解决方案2】：

$('.blocks').mouseenter(function() {
  $(this).addClass('current');
  setTimeout(function() {
    //$(this).aniamate('.current',null); //this line is not working
  }, 1500);
});
$('.blocks').mouseleave(function() {
  $(this).removeClass('current');
  $(this).animate({
    opacity: 0.5
  }, 'fast', function() {
    $(this)
      .removeClass('current')
      .animate({
        opacity: 1
      });
  });
});

.playboard {
  width: 330px;
}

.blocks {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: pink;
}

.blocks.current {
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="playboard">
  <div class="blocks" data-x="0" data-y="0"></div>
  <div class="blocks" data-x="0" data-y="1"></div>
  <div class="blocks" data-x="0" data-y="2"></div>
  <div class="blocks" data-x="0" data-y="3"></div>
  <div class="blocks" data-x="0" data-y="4"></div>
  <div class="blocks" data-x="0" data-y="5"></div>
  <div class="blocks" data-x="0" data-y="6"></div>
  <div class="blocks" data-x="0" data-y="7"></div>
  <div class="blocks" data-x="0" data-y="8"></div>
  <div class="blocks" data-x="0" data-y="9"></div>
  <div class="blocks" data-x="0" data-y="10"></div>
  <div class="blocks" data-x="1" data-y="0"></div>
  <div class="blocks" data-x="1" data-y="1"></div>
  <div class="blocks" data-x="1" data-y="2"></div>
  <div class="blocks" data-x="1" data-y="3"></div>
  <div class="blocks" data-x="1" data-y="4"></div>
  <div class="blocks" data-x="1" data-y="5"></div>
  <div class="blocks" data-x="1" data-y="6"></div>
  <div class="blocks" data-x="1" data-y="7"></div>
  <div class="blocks" data-x="1" data-y="8"></div>
  <div class="blocks" data-x="1" data-y="9"></div>
  <div class="blocks" data-x="1" data-y="10"></div>
  <div class="blocks" data-x="2" data-y="0"></div>
  <div class="blocks" data-x="2" data-y="1"></div>
  <div class="blocks" data-x="2" data-y="2"></div>
  <div class="blocks" data-x="2" data-y="3"></div>
  <div class="blocks" data-x="2" data-y="4"></div>
  <div class="blocks" data-x="2" data-y="5"></div>
  <div class="blocks" data-x="2" data-y="6"></div>
  <div class="blocks" data-x="2" data-y="7"></div>
  <div class="blocks" data-x="2" data-y="8"></div>
  <div class="blocks" data-x="2" data-y="9"></div>
  <div class="blocks" data-x="2" data-y="10"></div>
  <div class="blocks" data-x="3" data-y="0"></div>
  <div class="blocks" data-x="3" data-y="1"></div>
  <div class="blocks" data-x="3" data-y="2"></div>
  <div class="blocks" data-x="3" data-y="3"></div>
  <div class="blocks" data-x="3" data-y="4"></div>
  <div class="blocks" data-x="3" data-y="5"></div>
  <div class="blocks" data-x="3" data-y="6"></div>
  <div class="blocks" data-x="3" data-y="7"></div>
  <div class="blocks" data-x="3" data-y="8"></div>
  <div class="blocks" data-x="3" data-y="9"></div>
  <div class="blocks" data-x="3" data-y="10"></div>
  <div class="blocks" data-x="4" data-y="0"></div>
  <div class="blocks" data-x="4" data-y="1"></div>
  <div class="blocks" data-x="4" data-y="2"></div>
  <div class="blocks" data-x="4" data-y="3"></div>
  <div class="blocks" data-x="4" data-y="4"></div>
  <div class="blocks" data-x="4" data-y="5"></div>
  <div class="blocks" data-x="4" data-y="6"></div>
  <div class="blocks" data-x="4" data-y="7"></div>
  <div class="blocks" data-x="4" data-y="8"></div>
  <div class="blocks" data-x="4" data-y="9"></div>
  <div class="blocks" data-x="4" data-y="10"></div>
  <div class="blocks" data-x="5" data-y="0"></div>
  <div class="blocks" data-x="5" data-y="1"></div>
  <div class="blocks" data-x="5" data-y="2"></div>
  <div class="blocks" data-x="5" data-y="3"></div>
  <div class="blocks" data-x="5" data-y="4"></div>
  <div class="blocks" data-x="5" data-y="5"></div>
  <div class="blocks" data-x="5" data-y="6"></div>
  <div class="blocks" data-x="5" data-y="7"></div>
  <div class="blocks" data-x="5" data-y="8"></div>
  <div class="blocks" data-x="5" data-y="9"></div>
  <div class="blocks" data-x="5" data-y="10"></div>
  <div class="blocks" data-x="6" data-y="0"></div>
  <div class="blocks" data-x="6" data-y="1"></div>
  <div class="blocks" data-x="6" data-y="2"></div>
  <div class="blocks" data-x="6" data-y="3"></div>
  <div class="blocks" data-x="6" data-y="4"></div>
  <div class="blocks" data-x="6" data-y="5"></div>
  <div class="blocks" data-x="6" data-y="6"></div>
  <div class="blocks" data-x="6" data-y="7"></div>
  <div class="blocks" data-x="6" data-y="8"></div>
  <div class="blocks" data-x="6" data-y="9"></div>
  <div class="blocks" data-x="6" data-y="10"></div>
  <div class="blocks" data-x="7" data-y="0"></div>
  <div class="blocks" data-x="7" data-y="1"></div>
  <div class="blocks" data-x="7" data-y="2"></div>
  <div class="blocks" data-x="7" data-y="3"></div>
  <div class="blocks" data-x="7" data-y="4"></div>
  <div class="blocks" data-x="7" data-y="5"></div>
  <div class="blocks" data-x="7" data-y="6"></div>
  <div class="blocks" data-x="7" data-y="7"></div>
  <div class="blocks" data-x="7" data-y="8"></div>
  <div class="blocks" data-x="7" data-y="9"></div>
  <div class="blocks" data-x="7" data-y="10"></div>
  <div class="blocks" data-x="8" data-y="0"></div>
  <div class="blocks" data-x="8" data-y="1"></div>
  <div class="blocks" data-x="8" data-y="2"></div>
  <div class="blocks" data-x="8" data-y="3"></div>
  <div class="blocks" data-x="8" data-y="4"></div>
  <div class="blocks" data-x="8" data-y="5"></div>
  <div class="blocks" data-x="8" data-y="6"></div>
  <div class="blocks" data-x="8" data-y="7"></div>
  <div class="blocks" data-x="8" data-y="8"></div>
  <div class="blocks" data-x="8" data-y="9"></div>
  <div class="blocks" data-x="8" data-y="10"></div>
  <div class="blocks" data-x="9" data-y="0"></div>
  <div class="blocks" data-x="9" data-y="1"></div>
  <div class="blocks" data-x="9" data-y="2"></div>
  <div class="blocks" data-x="9" data-y="3"></div>
  <div class="blocks" data-x="9" data-y="4"></div>
  <div class="blocks" data-x="9" data-y="5"></div>
  <div class="blocks" data-x="9" data-y="6"></div>
  <div class="blocks" data-x="9" data-y="7"></div>
  <div class="blocks" data-x="9" data-y="8"></div>
  <div class="blocks" data-x="9" data-y="9"></div>
  <div class="blocks" data-x="9" data-y="10"></div>
  <div class="blocks" data-x="10" data-y="0"></div>
  <div class="blocks" data-x="10" data-y="1"></div>
  <div class="blocks" data-x="10" data-y="2"></div>
  <div class="blocks" data-x="10" data-y="3"></div>
  <div class="blocks" data-x="10" data-y="4"></div>
  <div class="blocks" data-x="10" data-y="5"></div>
  <div class="blocks" data-x="10" data-y="6"></div>
  <div class="blocks" data-x="10" data-y="7"></div>
  <div class="blocks" data-x="10" data-y="8"></div>
  <div class="blocks" data-x="10" data-y="9"></div>
  <div class="blocks" data-x="10" data-y="10"></div>
</div>

【讨论】：

@Wils，这是您想要的完美解决方案。
非常感谢，但我可以使用背景颜色来做动画而不是改变不透明度吗？
我必须试一试。我想你可以做到。
这可能是完美的解决方案，但是当您重新访问特定广场时，似乎出现了问题。随后的鼠标悬停不再显示灰色。
@PeterAbolins 同意，立即将其命名为完美解决方案有点“危险”

【解决方案3】：

.playboard {
  width: 330px;
}

.blocks {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: pink;
  transition: 150ms background-color;
}

.blocks:hover {
  background-color: grey;
}

.blocks.current {
  background-color: grey;
}

<div class="playboard">
  <div class="blocks" data-x="0" data-y="0"></div>
  <div class="blocks" data-x="0" data-y="1"></div>
  <div class="blocks" data-x="0" data-y="2"></div>
  <div class="blocks" data-x="0" data-y="3"></div>
  <div class="blocks" data-x="0" data-y="4"></div>
  <div class="blocks" data-x="0" data-y="5"></div>
  <div class="blocks" data-x="0" data-y="6"></div>
  <div class="blocks" data-x="0" data-y="7"></div>
  <div class="blocks" data-x="0" data-y="8"></div>
  <div class="blocks" data-x="0" data-y="9"></div>
  <div class="blocks" data-x="0" data-y="10"></div>
  <div class="blocks" data-x="1" data-y="0"></div>
  <div class="blocks" data-x="1" data-y="1"></div>
  <div class="blocks" data-x="1" data-y="2"></div>
  <div class="blocks" data-x="1" data-y="3"></div>
  <div class="blocks" data-x="1" data-y="4"></div>
  <div class="blocks" data-x="1" data-y="5"></div>
  <div class="blocks" data-x="1" data-y="6"></div>
  <div class="blocks" data-x="1" data-y="7"></div>
  <div class="blocks" data-x="1" data-y="8"></div>
  <div class="blocks" data-x="1" data-y="9"></div>
  <div class="blocks" data-x="1" data-y="10"></div>
  <div class="blocks" data-x="2" data-y="0"></div>
  <div class="blocks" data-x="2" data-y="1"></div>
  <div class="blocks" data-x="2" data-y="2"></div>
  <div class="blocks" data-x="2" data-y="3"></div>
  <div class="blocks" data-x="2" data-y="4"></div>
  <div class="blocks" data-x="2" data-y="5"></div>
  <div class="blocks" data-x="2" data-y="6"></div>
  <div class="blocks" data-x="2" data-y="7"></div>
  <div class="blocks" data-x="2" data-y="8"></div>
  <div class="blocks" data-x="2" data-y="9"></div>
  <div class="blocks" data-x="2" data-y="10"></div>
  <div class="blocks" data-x="3" data-y="0"></div>
  <div class="blocks" data-x="3" data-y="1"></div>
  <div class="blocks" data-x="3" data-y="2"></div>
  <div class="blocks" data-x="3" data-y="3"></div>
  <div class="blocks" data-x="3" data-y="4"></div>
  <div class="blocks" data-x="3" data-y="5"></div>
  <div class="blocks" data-x="3" data-y="6"></div>
  <div class="blocks" data-x="3" data-y="7"></div>
  <div class="blocks" data-x="3" data-y="8"></div>
  <div class="blocks" data-x="3" data-y="9"></div>
  <div class="blocks" data-x="3" data-y="10"></div>
  <div class="blocks" data-x="4" data-y="0"></div>
  <div class="blocks" data-x="4" data-y="1"></div>
  <div class="blocks" data-x="4" data-y="2"></div>
  <div class="blocks" data-x="4" data-y="3"></div>
  <div class="blocks" data-x="4" data-y="4"></div>
  <div class="blocks" data-x="4" data-y="5"></div>
  <div class="blocks" data-x="4" data-y="6"></div>
  <div class="blocks" data-x="4" data-y="7"></div>
  <div class="blocks" data-x="4" data-y="8"></div>
  <div class="blocks" data-x="4" data-y="9"></div>
  <div class="blocks" data-x="4" data-y="10"></div>
  <div class="blocks" data-x="5" data-y="0"></div>
  <div class="blocks" data-x="5" data-y="1"></div>
  <div class="blocks" data-x="5" data-y="2"></div>
  <div class="blocks" data-x="5" data-y="3"></div>
  <div class="blocks" data-x="5" data-y="4"></div>
  <div class="blocks" data-x="5" data-y="5"></div>
  <div class="blocks" data-x="5" data-y="6"></div>
  <div class="blocks" data-x="5" data-y="7"></div>
  <div class="blocks" data-x="5" data-y="8"></div>
  <div class="blocks" data-x="5" data-y="9"></div>
  <div class="blocks" data-x="5" data-y="10"></div>
  <div class="blocks" data-x="6" data-y="0"></div>
  <div class="blocks" data-x="6" data-y="1"></div>
  <div class="blocks" data-x="6" data-y="2"></div>
  <div class="blocks" data-x="6" data-y="3"></div>
  <div class="blocks" data-x="6" data-y="4"></div>
  <div class="blocks" data-x="6" data-y="5"></div>
  <div class="blocks" data-x="6" data-y="6"></div>
  <div class="blocks" data-x="6" data-y="7"></div>
  <div class="blocks" data-x="6" data-y="8"></div>
  <div class="blocks" data-x="6" data-y="9"></div>
  <div class="blocks" data-x="6" data-y="10"></div>
  <div class="blocks" data-x="7" data-y="0"></div>
  <div class="blocks" data-x="7" data-y="1"></div>
  <div class="blocks" data-x="7" data-y="2"></div>
  <div class="blocks" data-x="7" data-y="3"></div>
  <div class="blocks" data-x="7" data-y="4"></div>
  <div class="blocks" data-x="7" data-y="5"></div>
  <div class="blocks" data-x="7" data-y="6"></div>
  <div class="blocks" data-x="7" data-y="7"></div>
  <div class="blocks" data-x="7" data-y="8"></div>
  <div class="blocks" data-x="7" data-y="9"></div>
  <div class="blocks" data-x="7" data-y="10"></div>
  <div class="blocks" data-x="8" data-y="0"></div>
  <div class="blocks" data-x="8" data-y="1"></div>
  <div class="blocks" data-x="8" data-y="2"></div>
  <div class="blocks" data-x="8" data-y="3"></div>
  <div class="blocks" data-x="8" data-y="4"></div>
  <div class="blocks" data-x="8" data-y="5"></div>
  <div class="blocks" data-x="8" data-y="6"></div>
  <div class="blocks" data-x="8" data-y="7"></div>
  <div class="blocks" data-x="8" data-y="8"></div>
  <div class="blocks" data-x="8" data-y="9"></div>
  <div class="blocks" data-x="8" data-y="10"></div>
  <div class="blocks" data-x="9" data-y="0"></div>
  <div class="blocks" data-x="9" data-y="1"></div>
  <div class="blocks" data-x="9" data-y="2"></div>
  <div class="blocks" data-x="9" data-y="3"></div>
  <div class="blocks" data-x="9" data-y="4"></div>
  <div class="blocks" data-x="9" data-y="5"></div>
  <div class="blocks" data-x="9" data-y="6"></div>
  <div class="blocks" data-x="9" data-y="7"></div>
  <div class="blocks" data-x="9" data-y="8"></div>
  <div class="blocks" data-x="9" data-y="9"></div>
  <div class="blocks" data-x="9" data-y="10"></div>
  <div class="blocks" data-x="10" data-y="0"></div>
  <div class="blocks" data-x="10" data-y="1"></div>
  <div class="blocks" data-x="10" data-y="2"></div>
  <div class="blocks" data-x="10" data-y="3"></div>
  <div class="blocks" data-x="10" data-y="4"></div>
  <div class="blocks" data-x="10" data-y="5"></div>
  <div class="blocks" data-x="10" data-y="6"></div>
  <div class="blocks" data-x="10" data-y="7"></div>
  <div class="blocks" data-x="10" data-y="8"></div>
  <div class="blocks" data-x="10" data-y="9"></div>
  <div class="blocks" data-x="10" data-y="10"></div>
</div>

使用纯 CSS。

【讨论】：