HamburgIsNice HamburgIsNice - 6 months ago 18
CSS Question

Crate an arrow with a mouseover effect

I'd like to create a simple arrow with a mouseover effect. I crate a span and a triangle. But now I need a mouseover effect which should apply to the whole arrow. Any Idea? I put my Sourcetext in a fiddle.

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

Put them in a parent element and react to the :hover state of the parent :

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

Example with color change for both parts on parent hover : http://jsfiddle.net/u7tYE/8091/