在悬停/鼠标悬停时更改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>