html - 如何使用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>

我想添加一个悬停效果，这样每当有人悬停在它上面时，就会出现一个向下的三 Angular 形箭头。

谁能帮我怎么做？

Answer 1

这是一个简单的技巧:

1. 将三 Angular 形箭头放在页面上并隐藏
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 来控制悬停时三 Angular 形的渲染。