Erstellen Sie einen Pfeil mit einem Mouseover-Effekt

Question

Ich möchte einen einfachen Pfeil mit einem Mouseover-Effekt erstellen. Ich erstelle eine Spanne und ein Dreieck. Aber jetzt brauche ich einen Mouseover-Effekt, der für den ganzen Pfeil gelten soll. Irgendeine Idee? Ich habe meinen Sourcetext in eine Geige gelegt.

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

Setzen Sie sie in einem übergeordneten Element und reagieren auf den :hover Zustand des Mutter:

HTML:

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

CSS:

.parent:hover .rectangle, .parent:hover .series-triangle{ 
    /* Do something */ 
} 

Beispiel mit Farbwechsel für beide Teile auf Mutter schweben: http://jsfiddle.net/u7tYE/8091/