悬停不工作，这是由于flex属性？ [英] hover not working, is this due to flex properties?

问题描述

我想改变悬停的一些属性。
由于某些原因，当我使用类选择器时，它不起作用。

这个最低限度的工作：

 < div id =items> 
< div class =itemid =item1>< / div> 
< div class =itemid =item2>< / div> 
< div class =itemid =item3>< / div> 
< div class =itemid =item4>< / div> 
< div class =itemid =item5>< / div> 
< / div> 
 
 .item {
 width：50px; 
 height：50px; 
背景：红色; 
} 
 
 .item：hover {
 background：orange; 
} 
 
＃item1：hover {
 background：orange; 
 
 
 
 
 
 $ b 
然而，我有一个案例（见小提琴），它不工作，我真的很奇怪为什么。 
如果我使用一个id选择器，那么一切都很好。如果我使用类选择器，然后停止工作。这是由使用flex导致的？有没有解决这个问题？
 
 
 
  http ：//jsfiddle.net/clankill3r/u8rg90am/5/  
解决方案
这个不适合你的原因是因为你已经在每个单独的项目上使用了ID来指定它的颜色。当涉及到CSS时，一个ID总是会比一个类更重。 
 
 
 
这就是为什么在你的例子中，你添加到类中的悬停样式不会影响元素，因为已经使用它的ID来设置颜色。 
 $ b 
有几种方法可以解决这个问题。 
最好的方法是，如果你想保持你的代码结构是使用！重要的标签。像这样：
 
 
  .item：hover {
 background：orange！important; 
 
 
 
 
 
 $ b 
你也可以将你的ID换成类，这也是一个有效的选项。  
I want to change some properties on hover.
For some reason it does not work when I use a class selector.

This bare minimum works:
<div id="items">
    <div class="item" id="item1"></div>
    <div class="item" id="item2"></div>
    <div class="item" id="item3"></div>
    <div class="item" id="item4"></div>
    <div class="item" id="item5"></div>
</div>

.item {
    width: 50px;
    height: 50px;
    background: red;   
}

.item:hover {
    background: orange;
}

#item1:hover {
    background: orange;
}
However, I have a case (see fiddle) where it is not working and I really wonder why.
If I use a id selector then all is fine. If I use a class selector then it stops working. Is this caused by using flex? And is there a fix for this?

http://jsfiddle.net/clankill3r/u8rg90am/5/
解决方案
The reason this is not working for you is because you've used ID's on each individual item to specify it's color. An ID will always weigh more than a class when it comes to CSS. 

That is why in your example the hover style you added to the class does not effect the element because a color is already set using it's ID.

There are several ways you can solve this.
The best way however if you want to keep the code structure that you have is to use the !important tag. Like this:
.item:hover {
    background: orange!important;
}
You could also switch out your ID's for classes which would also be a valid option. 

                        
这篇关于悬停不工作，这是由于flex属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！