[英]How to change color of element on hover and remove it when mouseout using jquery?
I found the following Snippet (color changes randomly on hover) But there is now mouseout state – i want the link color to change in its original state when not hovering the link. 我发现以下代码片段(悬停时颜色随机更改),但是现在有mouseout状态–我希望链接颜色在不悬停链接时更改为其原始状态。
Can anyone help me with this? 谁能帮我这个?
$(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/ https://jsfiddle.net/99upf1jz/
you can use mouseout
... 您可以使用
mouseout
...
$( "p" ).mouseleave(function() {
$(this).css("color","#000");
});
Fiddle: https://jsfiddle.net/99upf1jz/1/ 小提琴: https : //jsfiddle.net/99upf1jz/1/
Use mouseleave
to apply a color when the mouse pointer moves from the link. 当鼠标指针从链接中移出时,请使用
mouseleave
来应用颜色。 Just change the #000
to whichever color you choose. 只需将
#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;
}
})
mouseleave
appears to be a more reliable solution for what you ask in comparison to mouseout
. 与
mouseout
相比, mouseleave
对于您的要求似乎是更可靠的解决方案。
See this site for a comparison: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseleave_mouseout 请访问此网站进行比较: http : //www.w3schools.com/jquery/tryit.asp? filename= tryjquery_event_mouseleave_mouseout
You can store color of element in variable before changing it and set stored color to element when mouse is un-hoverd. 您可以在更改变量之前将元素的颜色存储在变量中,并在鼠标悬停时将存储的颜色设置为元素。
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>
Simply add this after your $("p".mouseover()... 只需在您的$(“ p” .mouseover()之后添加此代码...
$( "p" ).mouseout(function() {
$(this).css("color","#222222");
});
instead of #222222, put whatever colour you wish to be the original colour. 而不是#222222,而是将您希望使用的任何颜色设置为原始颜色。
The mouseleave event works exactly like the mouseover event. mouseleave事件的工作原理与mouseover事件完全一样。 You can simply add it after the former, like this:
您可以简单地在前者之后添加它,如下所示:
$( "p" ).mouseover(function() {
$(this).css("color",getRandomColor());
}).mouseleave(function() {
$(this).css("color", "black");
});
https://jsfiddle.net/McNetic/99upf1jz/2/ https://jsfiddle.net/McNetic/99upf1jz/2/
If you really want to restore the "original" color (regardless what it was), you have to save it first. 如果您确实要恢复“原始”颜色(不管它是什么颜色),则必须先保存它。 That could be done with a data element to each attribute (a global variable like suggested by other answers will not restore each element to it's respective color):
可以使用每个属性的数据元素来完成(如其他答案所建议的全局变量不会将每个元素恢复为各自的颜色):
$( "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/ https://jsfiddle.net/McNetic/99upf1jz/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.