如何在悬停时更改元素的颜色并在鼠标移出时使用 jquery 将其删除？

Question

我找到了以下代码段（悬停时颜色随机变化）但是现在有 mouseout 状态——我希望 link 颜色在不悬停 link.

时改变其原始状态

谁能帮我解决这个问题？

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

Answer 1

您可以使用 mouseout...

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

Fiddle: https://jsfiddle.net/99upf1jz/1/

Answer 2

当鼠标指针从 link 移动时，使用 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

Answer 3

您可以在更改元素颜色之前将其存储在变量中，并在鼠标悬停时将存储的颜色设置为元素。

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>

Answer 4

只需在您的 $("p".mouseover()...

之后添加

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

而不是#222222，输入您希望成为原始颜色的任何颜色。

Answer 5

mouseleave 事件的工作方式与 mouseover 事件完全相同。您可以简单地在前者之后添加它，如下所示：

$( "p" ).mouseover(function() {
  $(this).css("color",getRandomColor());
}).mouseleave(function() {
    $(this).css("color", "black");
});

https://jsfiddle.net/McNetic/99upf1jz/2/

如果你真的想恢复"original"颜色（不管它是什么），你必须先保存它。这可以通过每个属性的数据元素来完成（其他答案所建议的全局变量不会将每个元素恢复为其各自的颜色）：

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

如何在悬停时更改元素的颜色并在鼠标移出时使用 jquery 将其删除？

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

javascript

css

jquery

mouseover

hover