如何使用css创建向下箭头悬停效果

Question

我有一个横向屏幕的矩形条。

#rcorners1 {
    border-radius: 25px;
    background: #00CCFF;
    padding: 20px; 
    width: 1210px;
    height: 10px;  
    line-height: 10px;
    vertical-align: middle;   
}

<h2 id="rcorners1"><font color = "#000066"> &nbsp;&nbsp;Applications:</font></h2>

我想添加一个悬停效果，只要有人在它上面盘旋，就会出现一个指向下方的三角形箭头。

有人可以帮我怎么做吗？

Answer 1

这是一个简单的伎俩：

1. 将三角形箭头放在页面上并隐藏它
2. 在悬停（通过css）时，显示元素

示例HTML：

<h2 id="rcorners1">
    Applications
    <span class="hidden pull-right">&#9660;</span> <!-- your down triangle -->
</h2>

示例CSS

/* Magic sauce */
#rcorners1:hover .hidden {
    display: inline-block;
}

/* Utilities */
.hidden     { display: none; }

演示： JSFiddle

注意：您也可以使用display来操纵悬停时的三角形渲染，而不是visibility。