CSS悬停效果转换会改变颜色吗？
[英]Is CSS hover effect transition changes the color?
问题描述
I have more than 10 buttons in a single page, so I need to write code at only once for hovering. 
我在一个页面中有超过10个按钮，所以我只需要编写一次代码来悬停。 and because of this I am using jQuery. 因为这个我使用jQuery。 Please go through my code. 请仔细检查我的代码。
$(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>
It works fine with a single hover, if we continuously hover on a button means it changes the color so if is there any other way to avoid this?? 如果我们连续悬停在按钮上意味着它会改变颜色，那么它是否可以通过单个悬停工作正常，如果有任何其他方法可以避免这种情况？ The color should remain same. 颜色应保持不变。
3 个解决方案
解决方案1
2 2017-10-06 09:27:55
Change all to transform in your button class css: 将all更改为按钮类css中的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
1 已采纳 2017-10-06 09:24:16
$(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; How about this? 这个怎么样？
解决方案3
0 2017-10-06 09:24:45
Add id to button 将id添加到按钮
<button class="button" style="background-color: red;" id="myId">Hover </button>
Then use jQuery find by id 然后使用jQuery find by 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
具有CSS过渡效果的jquery悬停功能仅在第二个悬停上有效 - jquery hover function with CSS transition effect ONLY working on second hover
背景颜色悬停渐变效果CSS - Background Color Hover Fade Effect CSS
按钮的悬停过渡效果 - Hover transition effect for Button
除了悬停建议之外的css过渡效果onload - css transition effect onload other than hover suggestions
css悬停大小过渡效果需要跨浏览器/后备解决方案 - css hover size transition effect cross browser/fallback solution needed
一张图片或更多图片的CSS3背景图片颜色过渡效果 - CSS3 background image color transition effect for an image or more
尝试将过渡效果应用于悬停 - Trying to apply transition effect to hover
悬停颜色过渡幻灯片效果 - hover colour transition slide effect
div的CSS过渡效果 - css transition effect for divs
CSS 过渡悬停 - CSS transition hover
相关标签