Question

我遇到了问题：/ 我有一个CSS东西thast使背景位置在悬停时改变。但是我在javascript中运行一个改变悬停的函数后，CSS就会停止工作。

这是功能：

function tree() {
var boxfb = document.getElementById('fb_box');
var boxtw = document.getElementById('twitter_box');
var boxsun = document.getElementById('sun_box');
var boxtree = document.getElementById('tree_box');
var btn = document.getElementById('hbtr');
if(boxtree.style.visibility == "hidden") {
    boxtw.style.visibility="hidden";
    boxfb.style.visibility="hidden";
    boxsun.style.visibility="hidden";
    boxtree.style.visibility="visible";
    btn.style.backgroundPosition="-150px -100px";
}
else {
    boxtree.style.visibility="hidden";
    btn.style.backgroundPosition="-150px 0";
}

}

住在http://enji.se（按左上角的树）

Answer 1

因为您要为元素添加'style'属性，所以此'style'属性中的任何内容都将覆盖任何预定义的CSS设置（优先级较高）。在这种情况下，“btn.style.backgroundPosition =” - 150px 0“;”通过将其直接添加到元素中来覆盖悬停样式“-150px -100px”
我不确定你到底要做什么，并且可能有一种更简单的方式来做你正在做的事情 - 但我想这不是你在这里的原因......

所以为了解决你的问题，我建议你做两件事之一： 1）使用javascript而不是样式属性来添加/删除类 - 或，作为快速解决方法 2）将'！important'添加到样式表的第343行，如下所示：

.tree:hover {
    background-position: -150px -100px !important;
}

Javascript破坏了CSS悬停

1 个答案: