在懸停/鼠標懸停時更改div內文本和svg的顏色

Question

我已經嘗試為文本實現添加/刪除類，並且它起作用了，但是問題是當鼠標移出轉換丟失時，如何保持它？

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

它不會在mouseout過渡，因為在刪除類時會刪除transition屬性。 如果您希望元素在mouseover和mouseout時transition ，則即使刪除了該類， transition屬性也應保持更改，因此您需要直接將過渡添加到#text元素（而不是先添加然后刪除的類）。 ：

 $('#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> 

附帶說明一下，根據您實際要執行的操作，您可能不需要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>