如何创建将鼠标悬停在屏幕上时显示的箭头"评论"在这个网站上?
http://mac.appstorm.net/category/reviews/
我想通过css创建这个,但我不知道该怎么做。什么是正确的"术语"那个?
谢谢!
答案 0 :(得分:3)
如果您注册并将鼠标悬停在其中一个菜单选项上,则可以在Simple Stock Search查看示例。
这种箭头的CSS是:
.reviews:after
{
content: "";
z-index: 9999;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -10px;
border-top: 10px solid red;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
访问此JSFiddle进行演示。
答案 1 :(得分:2)
<强> demo 强>
HTML
<span class="arrow_box">test</span>
CSS
.arrow_box:hover {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
width: 100px;
display:inline-block;
height: 25px;
}
.arrow_box:hover:after, .arrow_box:hover:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:hover:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 5px;
margin-left: -5px;
}
.arrow_box:hover:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 11px;
margin-left: -11px;
}