[英]Javascript destroys CSS hover
I got a problem :/ I got a CSS thingy thast makes the background position change on hover. 我遇到了一个问题:/我得到一个CSS东西,使得背景位置在悬停时发生变化。 But after i run a function in javascript that changes the hover the CSS one stops working.
但是我在javascript中运行一个改变悬停的函数后,CSS停止工作。
This is the function: 这是功能:
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";
}
} }
Live at http://enji.se (Press the tree in the top left corner) 住在http://enji.se (按左上角的树)
Because you're adding a 'style' attribute to your element, anything within this 'style' attribute will override any of your predefined CSS settings (it takes priority). 因为您要为元素添加“样式”属性,所以此“样式”属性中的任何内容都将覆盖任何预定义的CSS设置(优先级较高)。 I this case, "btn.style.backgroundPosition="-150px 0";"
在这种情况下,“btn.style.backgroundPosition =” - 150px 0“;” is overriding your hover style of "-150px -100px", by adding it directly to the element.
通过将其直接添加到元素中来覆盖悬停样式“-150px -100px”。
I'm not sure exactly what you're going for here, and there's probably a more simplistic way to do what you're doing -- but I suppose that's not why you're here... 我不确定你到底要去做什么,并且可能有一种更简单的方式来做你正在做的事情 - 但我想这不是你在这里的原因......
So to fix your problem I would suggest one of two things: 所以为了解决你的问题,我建议你做两件事之一:
1) Add/Remove a class using javascript instead of a style attribute 1)使用javascript而不是style属性添加/删除类
- OR , as a quick fix- - 或者 ,作为快速解决方案 -
2) add '!important' to Line 343 of your stylesheet, like so: 2)将'!important'添加到样式表的第343行,如下所示:
.tree:hover {
background-position: -150px -100px !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.