CSS悬停在同一元素内的另一个元素

时间:2015-09-02 00:00:58

标签: css

我有这个CSS:

.int_menu > li.showhide {
    display: none;
    width: 100%;
    height: 50px;
    cursor: pointer;
    color: #FFFFFF;
    background: #F36F25;
}
.int_menu > li.showhide:hover {
    display: none;
    width: 100%;
    height: 50px;
    cursor: pointer;
    color: #F36F25;
    background: #FFFFFF;
}

更改悬停时的背景颜色,但我还有一个em我需要在上面悬停时更改,我尝试在:hover之后添加em

.int_menu > li.showhide .icon em {
    margin-bottom: 3px;
    display: block;
    width: 20px;
    height: 2px;
    background: #FFFFFF;
}

但是这没有用,它只会在将鼠标悬停在每个em

上时进行更改

如何在em

的鼠标悬停时更改li.showhide内的所有.int_menu > li.showhide:hover {元素

1 个答案:

答案 0 :(得分:4)

你要做的就是这个。我认为你非常接近,你只需要将子选择器放在:hover之后。

CSS:

.int_menu > li.showhide:hover em { 
    margin-bottom: 3px; 
    display: block;
    width: 20px; 
    height: 2px; 
    background: #FFFFFF; 
}

或类似的东西