Is CSS hover effect transition changes the color?
Question
I have more than 10 buttons in a single page, so I need to write code at only once for hovering. and because of this I am using 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 answers
solution1
2 2017-10-06 09:27:55
Change all to transform in your button class css:
$(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>
solution2
1 ACCPTED 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?
solution3
0 2017-10-06 09:24:45
Add id to button
<button class="button" style="background-color: red;" id="myId">Hover </button>
Then use 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jquery hover function with CSS transition effect ONLY working on second hover
Background Color Hover Fade Effect CSS
Hover transition effect for Button
css transition effect onload other than hover suggestions
css hover size transition effect cross browser/fallback solution needed
CSS3 background image color transition effect for an image or more
Trying to apply transition effect to hover
hover colour transition slide effect
css transition effect for divs
CSS transition hover
Related Tags