호버에서 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; 

} 

제가

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

같은 호버 에서도 mearrow 변경할 필요

단지 CSS를

EDIT

를 사용 가능 양쪽 진주 스타일도 표시됩니다. 두 모양은 호버 후 표시됩니다.

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-나 {

} 
/* 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 { 

}