html - 悬停在带有图像的 anchor 标记元素上仅在悬停时出现

Question

我想在悬停的 anchor 标记元素上添加“向下箭头”图像，如下图所示。如何实现？

这是我的代码:

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 Ahir 的回应

在你挖掘出 css trianlges 的艺术之后

你可以使用伪元素来创建一个三 Angular 形，下面的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/