在悬停/鼠标悬停时更改div内文本和svg的颜色

Question

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> 

Answer 1

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>