Create an arrow with a mouseover effect

Question

I'd like to create a simple arrow with a mouseover effect. I create 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/

score 1 · Accepted Answer · answered Jun 02 '16 at 15:36

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/

Create an arrow with a mouseover effect

1 Answers1