使用css懸停更改基本元素？

Question

<div class="hdr-me">Me 
    <span class="mearrow"></span> 
</div> 

CSS

.hdr-me { 
    width: 33px;height: 28px;float: left; 
    -webkit-transition: all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97); 
    -moz-transition: all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97); 
    -o-transition: all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97); 
    -ms-transition: all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97); 
    transition-transition:all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97); 
    margin:9px 5px 5px 5px !important; 
    padding:12px 0px 0px 7px; 
    background:$blueDark; 
    border-radius: 60px; 
    -webkit-border-radius: 60px; 
    -moz-border-radius: 60px; 
    color:$white; 
    cursor:pointer; 
} 
.hdr-nav-rt .hdr-me .mearrow{ 
float: left; 
margin-left: 21px; 
border-left: 3px solid transparent; 
border-right: 3px solid transparent; 
border-top: 3px solid $white; 
margin-top: -6px; 
} 
.hdr-nav-rt .hdr-me:hover { 
    width: 33px;height: 28px;float: left; 
    margin:9px 5px 5px 5px !important; 
    padding:12px 0px 0px 7px; 
    background:$grayDark; 
    border-radius: 60px; 
    -webkit-border-radius: 60px; 
    -moz-border-radius: 60px; 
    color:$white; 
    cursor:pointer; 

} 

我也需要改變mearrow懸停 像

.hdr-nav-rt .hdr-me:hover .mearrow{ 
    float:left; 
    margin-left:21px; 
    border-left:3px solid transparent; 
    border-right:3px solid transparent; 
    **border-bottom:3px** solid #fff; 
    margin-top:-6px; 
    } 

只使用CSS

編輯

是有可能無論mearrow風格也顯示，無論是形狀顯示後懸停

Answer 1

：一般懸停效果最好的錨。我建議在.hdr-me中放置一個錨點並相應地更改css。所以基本上你必須：

<div class="hdr-me">Me 
    <a> 
    <span class="mearrow"></span> 
    </a> 
</div> 

然後你的CSS變成：

.hdr-nav-rt .hdr-me a:hover .mearrow 

的「.mearrow」將有懸停事件觸發它也這樣。

Answer 2

可以單獨應用樣式子塊。內部Div將採取自己的風格，它不會被父div的風格所覆蓋。

找到的jsfiddle here。

/*樣式父DIV */ .HDR-ME {

} 
/* Style for Parent div on Mouse hover*/ 
.hdr-me:hover { 

} 

/* Style for child div */  
.hdr-me .mearrow{ 

} 
/* Style for child div after on mouse hover*/  
.mearrow:hover { 

}