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

发布时间：2020-12-14 22:40:07 所属栏目：资源来源：网络整理

导读：我在一个页面中有超过10个按钮,所以我只需要编写一次代码来悬停.因为这个我使用jQuery.请仔细检查我的代码. $(document).ready(function(){$('.button').hover(function(){ var bc=$(this).css('background-color'); var cl=$(this).css('color'); $(this).c

我在一个页面中有超过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);
}


如果我们连续悬停在按钮上意味着它会改变颜色,那么它是否可以通过单个悬停工作正常,如果有任何其他方法可以避免这种情况？颜色应保持不变.


最佳答案

$(document).ready(function(){
	$('.button').hover(function(){
    	var bc=$(this).css('background-color');
        var cl=$(this).css('color');
    	$(this).css('background-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);
}

过渡：变换0.5s;这个怎么样？

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!