CSS悬停效果过渡会改变颜色吗？答案

【问题标题】：Is CSS hover effect transition changes the color?CSS悬停效果过渡会改变颜色吗？
【发布时间】：2018-03-18 01:34:42
【问题描述】：

我在一个页面中有超过 10 个按钮，所以我只需要编写一次代码来实现悬停。正因为如此，我正在使用 jQuery。请浏览我的代码。

$(document).ready(function(){
	$('.button').hover(function(){
    	var bc=$(this).css('background-color');
        var cl=$(this).css('color');
    	$(this).css('background-color',cl);
        $(this).css('color',bc);
           
    });
});

.button {  
  color: #FFFFFF;
  text-align: center;
  font-size: 22px;
  height:70px;
  width: 160px;
  margin: 5px;
  transition: all 0.5s;
  margin-right:30px;
}
.button:hover{
	 transform: scale(1.1);
}

<!DOCTYPE html>
<html>
<head>
<script           src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>

  <button class="button" style="background-color: red;">Hover </button>
  <button class="button" style="background-color: green;">Hover </button>
  <button class="button" style="background-color: blue;">Hover </button>
</body>
</html>

单次悬停效果很好，如果我们连续悬停在按钮上意味着它会改变颜色，那么是否有其他方法可以避免这种情况？颜色应该保持不变。

【问题讨论】：

您需要在鼠标离开时将背景颜色和字体颜色设置回旧状态。我建议将这些 css 数据保存在 mouseover 事件中，并在“mouseleave”事件中恢复到旧状态

标签： javascript jquery html css hover

【解决方案1】：

在您的按钮类 css 中将 all 更改为 transform：

$(document).ready(function(){
	$('.button').hover(function(){
    	var bc=$(this).css('background-color');
      var cl=$(this).css('color');
    	$(this).css({
         'background-color': cl,
         'color':bc
       });
           
   });
});

.button {  
  color: #FFFFFF;
  text-align: center;
  font-size: 22px;
  height:70px;
  width: 160px;
  margin: 5px;
  transition: transform 0.5s;
  margin-right:30px;
}
.button:hover{
	 transform: scale(1.1);
}

<!DOCTYPE html>
<html>
<head>
<script           src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>

<button class="button" style="background-color: red;">Hover </button>
<button class="button" style="background-color: green;">Hover </button>
<button class="button" style="background-color: blue;">Hover </button>
</body>
</html>

【讨论】：

【解决方案2】：

$(document).ready(function(){
	$('.button').hover(function(){
    	var bc=$(this).css('background-color');
        var cl=$(this).css('color');
    	$(this).css('background-color',cl);
        $(this).css('color',bc);
           
    });
});

.button {  
 color: #FFFFFF;
  text-align: center;
  font-size: 22px;
 height:70px;
  width: 160px;
  margin: 5px;
  transition: transform 0.5s;
  margin-right: 30px;
}
.button:hover{
	 transform: scale(1.1);
}

<!DOCTYPE html>
<html>
<head>
<script           src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>

<button class="button" style="background-color: red;">Hover </button>
<button class="button" style="background-color: green;">Hover </button>
<button class="button" style="background-color: blue;">Hover </button>
</body>
</html>

transition: transform 0.5s;这个怎么样？

【讨论】：

【解决方案3】：

将id 添加到按钮

<button class="button" style="background-color: red;" id="myId">Hover </button>

然后使用jQuery按id查找

$('#myId').hover(function())

$(document).ready(function(){
	$('#myId').hover(function(){
    	var bc=$(this).css('background-color');
        var cl=$(this).css('color');
    	$(this).css('background-color',cl);
        $(this).css('color',bc);
           
    });
});

.button {  
 color: #FFFFFF;
  text-align: center;
  font-size: 22px;
 height:70px;
  width: 160px;
  margin: 5px;
  transition: all 0.5s;
  margin-right:30px;
}
.button:hover {
	 transform: scale(1.1);
}

<!DOCTYPE html>
<html>
<head>
<script           src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>

<button class="button" style="background-color: red;" id="myId">Hover </button>
<button class="button" style="background-color: green;">Hover </button>
<button class="button" style="background-color: blue;">Hover </button>
</body>
</html>

【讨论】：