悬停在锚标记元素与图像只出现在悬停

Question

我想添加，“箭头向下”图像悬停锚标记元素，如下图所示。如何实现这一目标？

这里是我的代码：

HTML：

<div class="menu"> 
    <ul> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">PROFILE</a></li> 
    <li><a href="#">ACHIEVEMENTS</a></li> 
    <li><a href="#">AWARDS</a></li> 
    <li><a href="#">PUBLICATIONS</a></li> 
    <li><a href="#">MEDIA</a></li> 
    </ul> 
</div> 

CSS：

.menu{float:left;margin-left:1%;} 
.menu ul li{list-style:none;float:left;margin-right:18px;} 
.menu ul li:last-child{margin-right:0;} 
.menu ul li a{text-decoration:none;color:#fff; font-family: 'OpenSansSemibold';font-size:14px;border-bottom:3px solid transparent;padding-bottom:5px;} 
.menu ul li a:hover{background:url("images/arrow-down.png")no-repeat 50% 100%;border-bottom:3px solid #fff;} 

Answer 1

扩展在Balvant阿尔的回应

后你挖起来的css trianlges

您可以使用伪元素来创建一个三角形，CSS图片下方

.menu ul li a:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    border: 6px solid transparent; 
    border-top-color: white; 
    position: absolute; 
    bottom: -15px; 
    left: 50%; 
    margin-left: -3px; 
} 

箭头绝对定位，所以需要链接本身

上的相对位置设置

.menu ul li a { 
    position: relative; 
} 

这与display:none和display:block悬停玩耍

.menu ul li a:after { 
    display: none; 
} 

.menu ul li a:hover:after { 
    display: block; 
} 

应该是足够

演示：https://jsfiddle.net/Varinder/6sa3a4k4/

Answer 2

像这样的事情？当你有css做这项工作时，不要去找影像。检查其他样式。

​​3210

.menu ul { 
 
    float: left; 
 
    margin-left: 1%; 
 
} 
 
.menu ul li { 
 
    list-style: none; 
 
    float: left; 
 
    margin-right: 18px; 
 
} 
 
.menu ul li:last-child { 
 
    margin-right: 0; 
 
} 
 
.menu ul li a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    font-family: 'OpenSansSemibold'; 
 
    font-size: 14px; 
 
    border-bottom: 3px solid transparent; 
 
    padding-bottom: 5px; 
 
} 
 
.menu ul li a:hover { 
 
    background: url("images/arrow-down.png")no-repeat 50% 100%; 
 
    border-bottom: 3px solid #fff; 
 
} 
 
/* additional styles */ 
 

 
.menu { 
 
    padding: 5px 20px; 
 
    background: #3272B8; 
 
} 
 
.menu:after { 
 
    display: table; 
 
    clear: both; 
 
    content: ''; 
 
} 
 
.menu li { 
 
    position: relative; 
 
} 
 
.menu li a:after { 
 
    border-left: 8px solid transparent; 
 
    border-right: 8px solid transparent; 
 
    border-top: 8px solid #fff; 
 
    width: 0; 
 
    height: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: -12px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    visibility: hidden; 
 
} 
 
.menu li a:hover:after { 
 
    visibility: visible; 
 
}

<div class="menu"> 
 
    <ul> 
 
    <li><a href="#">HOME</a> 
 
    </li> 
 
    <li><a href="#">PROFILE</a> 
 
    </li> 
 
    <li><a href="#">ACHIEVEMENTS</a> 
 
    </li> 
 
    <li><a href="#">AWARDS</a> 
 
    </li> 
 
    <li><a href="#">PUBLICATIONS</a> 
 
    </li> 
 
    <li><a href="#">MEDIA</a> 
 
    </li> 
 
    </ul> 
 
</div>