[英]How do you get a triangle hover effect on a pure css navbar?
我想这可能就是你要找的东西:
另外,请使用语义标记:
<nav>
标签中。 <a>
元素。 <ul>
& <li>
)。 我添加了一个<span class="arrow"></span>
来包含HTML中的三角形:
<div class="tab_container">
<div id="test1-header" class="accordion_headings header_highlight" >Home<span class="arrow"></span></div>
<div id="test2-header" class="accordion_headings" >About<span class="arrow"></span></div>
<div id="test3-header" class="accordion_headings" >Work<span class="arrow"></span></div>
<div id="test4-header" class="accordion_headings" >Social<span class="arrow"></span></div>
<div id="test5-header" class="accordion_headings" >Contact<span class="arrow"></span></div>
</div>
以下是对菜单所做的更改,这些更改会缩小三角形的大小,并在悬停在每个菜单项的底部中心时将它们放置在:CSS:
/*
.accordion_headings:hover{
background:#00CCFF;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
}
*/
.accordion_headings{
position:relative;
}
.accordion_headings .arrow{
display:none;
}
.accordion_headings:hover .arrow{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
display:block;
position:absolute;
bottom:0;
left:49%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.