All geek questions in one place

Is the CSS hover change effect changed?

I have more than 10 buttons on one page, so I only need to write code once to freeze. and because of this i am using jQuery. Read 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 one hover, if we constantly hover a button on a button, it means it changes color, so if there is any other way to avoid this? The color should remain the same.

+5
source share
3 answers

 $(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?

+1
source

Change all to transform in the css button class:

 $(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
source

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>
0
source

Source: https://habr.com/ru/post/1272388/

More articles:


All Articles