마우스 오버 효과가있는 화살표 만들기

Question

마우스 오버 효과가있는 간단한 화살표를 만들고 싶습니다. 저는 스팬과 삼각형을 만듭니다. 하지만 이제 전체 화살표에 적용해야하는 마우스 오버 효과가 필요합니다. 어떤 아이디어? 내 Sourcetext를 바이올린에 넣었습니다.

HTML

<span id="series" class="rectangle"></span> 
<div class="series-triangle"></div> 

CSS

#series { 
    width: 60px; 
} 

.series-triangle{ 
    float:left; 
    width: 0px; 
    position: relative; 
} 

.series-triangle:after { 
    content: ''; 
    position: absolute; 
    top: 3px; 
    left: -3px; 
    width: 0; 
    height: 0; 
    border-color: transparent transparent transparent #EFDF00; 
    border-style: solid; 
    border-width: 31px; 
} 

.series-triangle:before { 
    content: ''; 
    position: absolute; 
    top: 1px; 
    left: -2px; 
    width: 10; 
    height: 10; 
    border-color: transparent transparent transparent #444; 
    border-style: solid; 
    border-width: 33px; 
} 

.series-triangle:hover { 
    background-color: white; 
} 

.rectangle { 
    float:left; 
    height: 60px; 
    border: 2px solid #444; 
    padding: 2px; 
    text-align: center; 
    border-radius: 5px; 
    background-color: #EFDF00; 
} 

.rectangle:hover { 
    background-color: white; 
} 

http://jsfiddle.net/u7tYE/8089/

Answer 1

부모 요소에 넣어 부모의 :hover 상태로 반응 :

HTML :

<div class="parent"> 
    <span id="series" class="rectangle"></span> 
    <div class="series-triangle"> 
    </div> 
</div> 

CSS : http://jsfiddle.net/u7tYE/8091/