css - 创建一个带有鼠标悬停效果的箭头

Question

我想创建一个带有鼠标悬停效果的简单箭头。我创建了一个跨度和一个三 Angular 形。但现在我需要一个应用于整个箭头的鼠标悬停效果。任何想法？我把我的源文本放在 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 1

将它们放在父元素中并对父元素的 :hover 状态使用react:

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

父悬停时两个部分的颜色变化示例: http://jsfiddle.net/u7tYE/8091/