한 요소의 위치를 ​​다른 요소의 호버 상태로 변경

Question

두 개의 버튼 중 하나 아래에 CSS 삼각형이 위치하여 그 아래에있는 텍스트가 해당 버튼과 관련되어 있음을 나타냅니다. 그 옆에있는 버튼 위로 마우스를 가져 가면 해당 삼각형을 두 번째 버튼 아래로 이동하고 싶습니다.

.nubbin { 
    width: 0; 
    height: 0; 
    border-left: 2em solid transparent; 
    border-right: 2em solid transparent; 
    border-bottom: 2em solid #435C6E; 
    margin-left: calc(50% - 10em); 
} 

내 버튼은 "보고서 클래스"의 수업을 :

내 삼각형은 다음과 같은 스타일로 빈 DIV이다. 내가 시도한 것은 :

.chat:hover~.nubbing { 
    margin-left: calc(50% + 10em); 
} 

및

.chat:hover+.nubbing { 
    margin-left: calc(50% + 10em); 
} 

내가 잘못 뭐하는 거지?

Answer 1

ralph.m처럼, using :: after 의사 요소를 사용하는 것이 좋습니다. 이 예제 밖으로

확인 : http://jsfiddle.net/scottmey/PhZ7x/2/

는 희망이 올바른 방향을 가리 킵니다.

.comment { 
    position: relative; 
    display: inline-block; 
    width: 620px; 
    vertical-align: top; 
    padding: 3px 10px; 
    background: #435C6E; 
    margin-bottom: 15px; 
    margin-left: 10px; 
} 

.comment:hover:after { 
    content: ""; 
    position: absolute; 
    top: 5px; 
    left: -15px; 
    border-style: solid; 
    border-width: 10px 15px 10px 0; 
    border-color: transparent #435C6E; 
    display: block; 
    width: 0; 
    z-index: 1; 
}