javascript jQuery更改悬停在颜色上，然后返回到原始颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6836166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery change hover on color, then return back to original color
提问by technopeasant
I've got some buttons on a page whose color is changed via jQuery, illustrating which one's active. I'd like to add a color change ONLY when hovering, after which it's returned to the original color (which is dictated by jQuery) when left.
我在页面上有一些按钮，它们的颜色通过 jQuery 改变，说明哪个按钮处于活动状态。我只想在悬停时添加颜色变化，然后在离开时返回到原始颜色（由 jQuery 决定）。
I first used css: .showlink li:hover {color:#aaa;}which works appropriately except for that when the pages are switched and jQuery changes the colors, it superceeds the CSS.
我首先使用 css:.showlink li:hover {color:#aaa;}除了当页面切换和 jQuery 更改颜色时，它可以正常工作，它会取代 CSS。
Then I decided to use simple jQuery that says when something's hovered on, change it's color. this doesn't completely work because it permanently changes the color. To mitigate this, I added in a bit to the function that returns it to a different color.
然后我决定使用简单的 jQuery，它说当有东西悬停在上面时，改变它的颜色。这并不完全有效，因为它会永久改变颜色。为了缓解这种情况，我在函数中添加了一点，使其返回不同的颜色。
is there some way I can return it to the original color from before it was changed on hover?
有什么方法可以将它恢复到悬停时更改之前的原始颜色吗？
// Changes color on hover
$(function() {
$('.showlink').hover(function(){
$(this).css('color', '#aaa');
},
function(){
$(this).css('color', '#f3f3f3');
});
});
//Changes color depending on which page is active, fades that page in
$(function(){
$('#show_one').css('color', '#ffcb06');
$('#two, #three').hide();
});
$('.showlink').click(function(){
$('.showlink').css('color', '#f3f3f3');
$(this).css('color', '#ffcb06');
var toShow = this.id.substr(5);
$('div.page:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});
回答by Wulf
.showlink li:hover {color:#aaa !important;}
will superceede everything else.
将超越一切。
回答by David says reinstate Monica
I'd recommend using an array to record the original color value, and use that in the mouseleave(second) function of hover():
我建议使用数组来记录原始颜色值，并在以下mouseleave（第二个）函数中使用它hover()：
var originalColors = [];
// Changes color on hover
$(function() {
$('.showlink').hover(function(){
originalColors[$(this).index('.showlink')] = $(this).css('color');
$(this).css('color', '#aaa');
},
function(){
$(this).css('color', originalColors[$(this).index('.showlink')]);
});
});
You could also use addClass()and removeClass():
您还可以使用addClass()和removeClass()：
// Changes color on hover
$(function() {
$('.showlink').hover(function(){
$(this).addClass('hovered');
},
function(){
$(this).removeClass('hovered');
});
});
Which would simply use CSS to apply the changed colour, and wouldn't require any kind of local storage of the CSS colour to reimplement it on mouseleave.
这将简单地使用 CSS 来应用更改后的颜色，并且不需要任何类型的 CSS 颜色的本地存储来重新实现它mouseleave。
回答by JAAulde
Although it may be best to use CSS for this, there are times when JavaScript is preferred for one reason or another. Even if CSS is always batter, the concept below should help you with other things in the future as well. So, that being said:
尽管最好为此使用 CSS，但有时出于某种原因还是首选 JavaScript。即使 CSS 总是很糟糕，下面的概念也应该在未来帮助你处理其他事情。所以，话虽如此：
On hover, before changing color, get the current color and store it in the element's data. On hover-out, read that color back.
在悬停时，在更改颜色之前，获取当前颜色并将其存储在元素的数据中。在悬停时，读回那个颜色。
Demo:
演示：
http://jsfiddle.net/JAAulde/TpmXd/
http://jsfiddle.net/JAAulde/TpmXd/
Code:
代码：
/* Changes color on hover */
$( function()
{
$( '.showlink' ).hover(
function()
{
/* Store jQuerized element for multiple use */
var $this = $( this );
$this
/* Set the pre-color data */
.data( 'prehovercolor', $this.css( 'color' ) )
/* Set the new color */
.css( 'color', '#aaa' );
},
function()
{
/* Store jQuerized element for multiple use */
var $this = $( this );
$this
/* Set the color back to what is found in the pre-color data */
.css( 'color', $this.data( 'prehovercolor') );
}
);
} );
回答by Joseph Marikle
when I have issues like this where original data on an element is lost, I call myElement.setAttribute("oldcolor",myElement.style.color)before changing it, and when I want to revert, I just set it to that. myElement.style.color = myElement.getAttribute("oldcolor")
当我遇到这样的问题时，元素上的原始数据丢失了，我myElement.setAttribute("oldcolor",myElement.style.color)在更改它之前调用它，当我想恢复时，我只是将它设置为那个。 myElement.style.color = myElement.getAttribute("oldcolor")
回答by Steve Seeger
Use jQuery .mouseout()this is like the inverse of .hover(). If the mouse goes over .showlink element and then off of it again, .mouseout() is called.
使用 jQuery .mouseout()这就像 .hover() 的反面。如果鼠标经过 .showlink 元素然后再次离开它，则调用 .mouseout() 。
$('.showlink').hover(function(){
$(this).css('color', '#aaa');
}
$('.showlink').mouseout(function(){
$(this).css('color', '#bbb');
}
