如何使用jquery改变悬停元素的颜色，并在鼠标离开时将其移除

How to change color of element on hover and remove it when mouseout using jquery?

本文关键字：离开 鼠标 改变 jquery 何使用 悬停 元素 颜色      更新时间：2023-09-26

我发现了以下代码片段(悬停时颜色随机变化)但现在有鼠标离开状态-我希望链接的颜色改变在其原始状态时，不悬停的链接。

有谁能帮我一下吗?
$(document).ready(function() {
    $( "p" ).mouseover(function() {
        $(this).css("color",getRandomColor());
    });
    function getRandomColor () {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
})
https://jsfiddle.net/99upf1jz/

您可以使用mouseout…

$( "p" ).mouseleave(function() {
   $(this).css("color","#000");
});

小提琴: https://jsfiddle.net/99upf1jz/1/

mouseleave事件的工作原理与mouseover事件完全相同。您可以简单地在前者后面添加它，像这样:

$( "p" ).mouseover(function() {
  $(this).css("color",getRandomColor());
}).mouseleave(function() {
    $(this).css("color", "black");
});
https://jsfiddle.net/McNetic/99upf1jz/2/

如果你真的想恢复"原始"颜色(不管它是什么)，你必须先保存它。这可以通过为每个属性添加一个数据元素来实现(其他答案中建议的全局变量不会将每个元素恢复为各自的颜色):

$( "p" ).mouseover(function() {
  $(this).data("original-color", $(this).css("color")).css("color",getRandomColor());
}).mouseleave(function() {
    $(this).css("color", $(this).data("original-color"));
});
https://jsfiddle.net/McNetic/99upf1jz/5/

使用mouseleave在鼠标指针离开链接时应用颜色。只要将#000更改为您选择的颜色即可。

$(document).ready(function() {
$( "p" ).mouseover(function() {
$(this).css("color",getRandomColor());
});
$("p").mouseleave(function(){
       $(this).css("color","#000");
});
function getRandomColor () {
 var letters = '0123456789ABCDEF'.split('');
 var color = '#';
 for (var i = 0; i < 6; i++) {
     color += letters[Math.floor(Math.random() * 16)];
 }
 return color;
    }
})
与mouseout相比，

mouseleave似乎是一个更可靠的解决方案。

请看这个网站的比较:http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseleave_mouseout

可以将元素的颜色存储在变量中，然后再对其进行更改，并在鼠标未悬停时为元素设置存储的颜色。

var color;
$( "p" ).mouseover(function() {
    color = $(this).css("color");
    $(this).css("color", getRandomColor());
}).mouseout(function(){
    $(this).css("color", color);
});


var color;
$( "p" ).hover(function() {
    color = $(this).css("color");
    $(this).css("color", getRandomColor());
}, function(){
    $(this).css("color", color);
});
function getRandomColor () {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>test</p>
<p>test1</p>

在$("p".mouseover()…

$( "p" ).mouseout(function() {
$(this).css("color","#222222");
});

用你想要的颜色代替#222222，

相关文章：