如果我将鼠标悬停在链接上而不实际悬停在链接上,我想嗅探链接会变成的颜色。我想这样做的原因是我知道如何将其改回使用动画,因为可以通过各种可以动态应用的皮肤来设置颜色。我可以使用 javascript 或 jquery 来做到这一点(或者有其他方法吗)?
编辑:我已经使用 CSS 过渡实现了这一点,但我需要 IE9 及以下版本的 javascript
如果我将鼠标悬停在链接上而不实际悬停在链接上,我想嗅探链接会变成的颜色。我想这样做的原因是我知道如何将其改回使用动画,因为可以通过各种可以动态应用的皮肤来设置颜色。我可以使用 javascript 或 jquery 来做到这一点(或者有其他方法吗)?
编辑:我已经使用 CSS 过渡实现了这一点,但我需要 IE9 及以下版本的 javascript
不,不幸的是,这是不可能的:您可以使用它getComputedStyle()
来检索有关伪元素 ( ::before
/ ::after
) 的信息,但不能检索:hover
伪选择器。
参考:
您可以从样式表中获取值:http: //jsfiddle.net/wt3qQ/
// code I found here: http://catcode.com/dominfo/getstyle2.html
function getStyleBySelector( selector )
{
var sheetList = document.styleSheets;
var ruleList;
var i, j;
/* look through stylesheets in reverse order that
they appear in the document */
for (i=sheetList.length-1; i >= 0; i--)
{
ruleList = sheetList[i].cssRules;
for (j=0; j<ruleList.length; j++)
{
if (ruleList[j].type == CSSRule.STYLE_RULE &&
ruleList[j].selectorText == selector)
{
return ruleList[j].style;
}
}
}
return null;
}
console.log(getStyleBySelector('a:hover').color);
console.log(getStyleBySelector('#link:hover').color);
如果您打算为颜色设置动画,那么(对于现代浏览器)您可以启用颜色的转换,这样它就会自动动画到它变成的任何东西:hover
要申请代码,您可以这样做
$('element').css({
'-webkit-transition':'color 0.5s',
'-moz-transition':'color 0.5s',
'-o-transition':'color 0.5s',
'transition':'color 0.5s',
});