如何防止div：悬停从JavaScript div样式属性更改禁用转换 [英] How to prevent div:hover transitions from being disabled by javascript div style attributes alterations
问题描述
以下是我一直试图调试的jsfiddle：
http://jsfiddle.net/Neoheurist/x57fkzng/
HTML
< div id =birthday>惊喜派对< / div>
< p>< / p>
< button onclick =blue（）>蓝色< /按钮>
< button onclick =red（）>红色< / button>
< script>
函数blue（）
{
element = document.getElementById（birthday）;
element.innerHTML =开心;
element.style.background =blue;
element.style.width =150px;
element.style.opacity =1.0;
element.style.transition =宽度2s，背景15s，不透明度2s;
}
函数red（）
{
element = document.getElementById（birthday）;
element.innerHTML =生日;
element.style.background =red;
element.style.width =300px;
element.style.opacity =0.0;
element.style.transition =宽度2s，背景4s，不透明度6s;
}
< / script>
CSS
div
{
width：100px;
height：50px;
背景：蓝色;
过渡：宽度2s，不透明度2s，背景15s;
}
div：hover
{
width：200px;
背景：绿色;
不透明度：0.25;
transition-timing-function：linear;
过渡：宽度2s，背景4s，不透明度6s;
问题：
为什么点击一个按钮禁用div：hover？
我怎样才能防止这种情况发生？
这是因为HTML样式属性覆盖了css文件中的元素选择器。直接在HTML样式属性中设置的任何属性都将自动用于任何CSS选择器声明中设置的任何属性。
样式属性比标签选择器更具体（这就是为什么他们不推荐用于实际）。
根据webkit中的检查员，这还包括：悬停状态，所以任何内联样式都会停止悬停状态
您可以使用重要的，诱人的，但这不是一个好主意，因为它需要特定的当前问题，并且进一步放大它，从而导致！important 的唯一方法是使用更多！important ，进一步放在文档的下面，或者使用更多特定的选择器（如ID）或更长的选择器链和！important> 等等，您可以看到如何保持这种可怕性。
最好的解决方案是使用 javascript来添加和删除css类来触发你的变化即可。这将解决您的问题，因为所有的类都具有可管理性。
＃birthday.blue {
background：blue ;
width：150px;
opacity：1.0;
过渡：宽度2s，背景15s，不透明度2s;
}
＃birthday.red {
background：red;
width：300px;
opacity：0.0;
过渡：宽度2s，背景4s，不透明度6s;
}
然后确保悬停状态是为所有组合定义的，所以任何类别将会：hover 。这对于内联样式是不可能的。
#birthday：hover，
＃birthday.blue：hover，
＃birthday.red：hover
{
width：200px;
背景：绿色;
不透明度：0.2;
transition-timing-function：linear;
过渡：宽度2s，背景4s，不透明度6s;
}
我把一个 jsfiddle演示这个。我使用过JQuery，为了快速获得演示，并且它们的 addClass（）方法非常棒。努力使用纯粹的js，这是一个很好的习惯;这个问题将阐述如何在javascript中添加和删除类
加号; 作为额外的奖励，您还可以在样式文件中使用所有样式，并在JavaScript中使用所有功能，这更好关注点分离并使网站造型 DRYer ，并且更容易在项目中的其他地方重新使用（您没有样式卡住的是js，您不能轻易地将其添加到其他地方，而是复制它们，然后尝试在一个位置进行更改，而不是其他......我们都这样做，或者我们的同事也这么做！）。
[看到我提出了特定主题，您可能也有兴趣知道该ID也是漂亮不好的，在样式文件中是不必要的）
Here's the jsfiddle that I've been trying to debug:
http://jsfiddle.net/Neoheurist/x57fkzng/
HTML
<div id="birthday">Surprise Party</div>
<p></p>
<button onclick="blue()">Blue</button>
<button onclick="red()">Red</button>
<script>
function blue()
{
element=document.getElementById("birthday");
element.innerHTML="Happy";
element.style.background="blue";
element.style.width="150px";
element.style.opacity="1.0";
element.style.transition="width 2s,background 15s,opacity 2s";
}
function red()
{
element=document.getElementById("birthday");
element.innerHTML="Birthday";
element.style.background="red";
element.style.width="300px";
element.style.opacity="0.0";
element.style.transition="width 2s,background 4s,opacity 6s";
}
</script>
CSS
div
{
width:100px;
height:50px;
background:blue;
transition:width 2s,opacity 2s,background 15s;
}
div:hover
{
width:200px;
background:green;
opacity:0.25;
transition-timing-function:linear;
transition:width 2s,background 4s,opacity 6s;
}
Questions:
Why does clicking a button disable div:hover?
How can I prevent this from happening?
It's because HTML style attributes override element selectors in a css file. Any property set directly in an HTML style attribute will automatically be used over any property set in any css selector declaration.
Style attributes are much more specific than tag selectors (that's why they aren't recommended for use in fact).
According to the inspector in webkit this also includes the :hover state, so any inline style will stop a hover state from working.
You could use important, tempting as it might be, but that's not a good idea, because it takes the current problem with specificity that you're having and amplifies it even further, leading to a specificity nightmare. The only way to over-ride !important is with more !important, further down the document, or by using more specific selectors (like IDs) or longer chains of selectors and !important and so on, you can see how this can be horrible to maintain. Also any js that adds style to the HTML directly won't work either.
The best solution is to use javascript to add and remove css classes to trigger your changes. This will solve your problem as all your classes will have manageable specificity.
#birthday.blue {
background: blue;
width: 150px;
opacity: 1.0;
transition: width 2s,background 15s,opacity 2s;
}
#birthday.red {
background: red;
width: 300px;
opacity: 0.0;
transition: width 2s,background 4s,opacity 6s;
}
Then make sure the hover state is defined for all the combinations, so any class will :hover. This is not possible with inline styles.
#birthday:hover,
#birthday.blue:hover,
#birthday.red:hover
{
width: 200px;
background: green;
opacity: 0.2;
transition-timing-function: linear;
transition: width 2s,background 4s,opacity 6s;
}
I've put together a jsfiddle that demos this. I've used JQuery, for the sake of getting a demo together quickly and their addClass() method is great. Good effort to use pure js, it's a good habit to get into; this question will elaborate on how to add and remove classes in javascript
Plus; as an added bonus, you'll also have all your style in your style file and all your functionality in your javascript, which is better separation of concerns and makes the site styling DRYer and easier to re-use elsewhere in the project (you don't have styles stuck is js that you can't easily add elsewhere, which you copy instead, then try to change in one place and not the other ... we all do it, or our colleagues do!).
[Seen as I've brought up the subject of specificity you might also be interested to know that IDs are also pretty bad for that and unnecessary in style files]
这篇关于如何防止div：悬停从JavaScript div样式属性更改禁用转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
