Is CSS hover effect transition changes the color?

user_7633941 0
Viewed 69

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.

hover css html jquery javascript
3 Answers

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>

user_65421860 

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

user_84370990

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>

user_78875300
Related