Ad

Change Color Of Text And Svg Inside The Div On Hover/mouseover

- 1 answer

I've tried to implement add/remove class for the text and it worked, but the issue is when the mouse out the transition is lost, how it can be keeped?

$(document).ready(function() {
  $('#bookmark').mouseover(function() {
    $('#text').addClass('light-blue-link')
  });
  $('#bookmark').mouseout(function() {
    $('#text').removeClass('light-blue-link')
  });
});
.light-blue-link {
  color: rgb(88, 202, 230);
  transition: color 1s ease;
}


.button {
  height: 30px;
  width: auto;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='bookmark' class='button'>
  <span id='text' class=''>Text</span>
</div>

Ad

Answer

It's not transitioning on mouseout because the transition property is removed when the class is removed. If you want the element to transition on mouseover and mouseout, the transition property should remain changed even if the class is removed, therefore you need to add the transition to the #text element directly (rather than the class that is added and then removed):

$('#bookmark').mouseover(function() {
  $('#text').addClass('light-blue-link')
});
$('#bookmark').mouseout(function() {
  $('#text').removeClass('light-blue-link')
});
#text {
  transition: color 1s ease;
}
.light-blue-link {
  color: rgb(88, 202, 230);
}
.button {
  height: 30px;
  width: auto;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='bookmark' class='button'>
  <span id='text'>Text</span>
</div>

As a side note, depending on what you're actually trying to do, you may not need jQuery:

#text {
  transition: color 1s ease;
}
.button:hover #text {
  color: rgb(88, 202, 230);
}
.button {
  height: 30px;
  width: auto;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='bookmark' class='button'>
  <span id='text'>Text</span>
</div>

Ad
source: stackoverflow.com
Ad