Question

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

这个最低限度的工作原理：

<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;
}

然而，我有一个案例（见小提琴），它不工作，我真的很想知道为什么。如果我使用id选择器，那么一切都很好。如果我使用类选择器，它就会停止工作。这是由使用flex引起的吗？有没有解决这个问题？

http://jsfiddle.net/clankill3r/u8rg90am/5/

Answer 1

这不适合你的原因是因为你在每个单独的项目上使用了ID来指定它的颜色。在CSS方面，ID总是比一个类更重要。

这就是为什么在您的示例中，您添加到类中的悬停样式不会影响该元素，因为已经使用它的ID设置了颜色。

有几种方法可以解决这个问题。但是，如果要保留代码结构，最好的方法是使用！important标记。像这样：

.item:hover {
    background: orange!important;
}

您也可以为类别切换ID，这也是一个有效的选项。

Answer 2

问题在于选择器的重量。因为您的标识#item具有背景颜色。当您使用.item:hover覆盖时，选择器的权重不会覆盖id。

解决方案是使用items的特定类编写background。

例如：

.item.bg-green {
      background-color: green;
 }
.item.bg-green:hover {
      background-color: orange;
}

我不建议在css中使用id作为选择器。并且不建议使用!important。当你进入可能导致问题的更大项目时。

完全正常的例子：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}


.bg-green {
    background: green;
}
.bg-blue {
    background: blue;
}
.bg-orange {
    background: orange;
}
.bg-purple {
    background: purple;
}
.bg-brown {
    background: brown;
}


#container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

 #header {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    height: 60px;
    background: red;
}

#items {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    display: flex;
    flex-direction: column;
}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    /* transition: all 2s; */
}

@media screen and (orientation: landscape) { 
   
    #items {
        flex-direction: column;
    }

 
}


@media screen and (orientation: portrait) {

    #items {
        flex-direction: row;
    }    
    
}


/* why does this not work?*/
.item:hover {
    background: orange;
}


#header:hover {
    background: orange;
}

<div id="container">
    <div id="header">HEADER</div>
    <div id="items">
        <div class="item bg-green" id="item1"></div>
        <div class="item bg-blue" id="item2"></div>
        <div class="item bg-orange" id="item3"></div>
        <div class="item bg-purple" id="item4"></div>
        <div class="item bg-brown" id="item5"></div>
    </div>
</div>

Answer 3

只需提供!important即可：

.item:hover {
    background: orange !important;
}

因为

#item2 {
    background: none repeat scroll 0 0 blue;
}

将删除/重叠背景等等。

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}


#item1 {
    background: green;
}
#item2 {
    background: blue;
}
#item3 {
    background: orange;
}
#item4 {
    background: purple;
}
#item5 {
    background: brown;
}


#container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

 #header {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    height: 60px;
    background: red;
}

#items {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    display: flex;
    flex-direction: column;
}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    /* transition: all 2s; */
}

@media screen and (orientation: landscape) { 
   
    #items {
        flex-direction: column;
    }

 
}


@media screen and (orientation: portrait) {

    #items {
        flex-direction: row;
    }    
    
}


/* why does this not work?*/
.item:hover {
    background: orange !important;
}

/* this works*/
#item1:hover {
    background: orange;
}

#header:hover {
    background: orange;
}

<div id="container">
    <div id="header">HEADER</div>
    <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>
</div>

检查Fiddle.

Answer 4

不知道确切的原因，但这是因为你正在将id和类混合在一起。您为id设置背景，然后尝试使用：hover on class。在课堂上设置它，它将工作。不要使用你不需要的地方

Answer 5

没有弯曲会给你带来麻烦。 ID的优先级高于Classes。

添加一个重要标志将强制该类覆盖该ID。

.item:hover {
  background: orange !important;
}

我认为值得一提的是，由于这个原因，许多人不会使用ID来制作东西。许多人为JavaScript保留了ID。然而，这不是一成不变的，它只是一种常见的做法。

悬停不起作用，这是由于弹性属性？

5 个答案: