Question

我在一个页面中有10个以上的按钮，所以我只需要编写一次代码来悬停。因为这个我使用jQuery。请仔细阅读我的代码。

＆＃13;

$(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);
           
    });
});

＆＃13;

.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);
}

＆＃13;

<!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>

＆＃13;

单个悬停工作正常，如果我们不断悬停在按钮上意味着它会改变颜色，所以如果还有其他方法可以避免这种情况吗？颜色应保持不变。

Answer 1

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

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

<!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>

＆＃13;

Answer 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;这个怎么样？

Answer 3

将id添加到按钮

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

然后使用jQuery find by id

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

＆＃13;

$(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);
           
    });
});

＆＃13;

.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);
}

＆＃13;

<!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>

＆＃13;

CSS悬停效果转换会改变颜色吗？

3 个答案: