CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
Nagaraj Pujar
Nagaraj Pujar

Reputation: 530

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. 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.

Upvotes: 5

Views: 77

Answers (3)

Zhenya Telegin
Zhenya Telegin

Reputation: 587

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>

Upvotes: 0

SilverSurfer
SilverSurfer

Reputation: 4365

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>

Upvotes: 2

kyun
kyun

Reputation: 10274

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

Upvotes: 1

Related Questions