将鼠标悬停在锚标记元素上，图像仅在悬停时显示

Question

我想补充一下＆＃34;向下箭头＆＃34;悬停锚标记元素上的图像，如下图所示。怎么实现呢？

这是我的代码：

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

的艺术之后

您可以使用伪元素创建一个三角形，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;
}

在hover上使用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完成工作时，请不要寻找图像。检查其他样式。

<强> FIDDLE

.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>