显示图像悬停在导航栏上

Question

我是CSS的新手..我想在导航栏中的每个元素上添加一个条形图像，该元素出现在悬停和选定元素上 像这样

这是我的HTML

<nav>
    <ul>
        <li><a href="/ecomm/public" class="selected">HOME</a></li>
        <li><a href="about" >ABOUT US</a></li>
        <li><a href="portfolio">PORTFOLIO</a></li>
        <li><a href="contact" >CONTACT</a></li>

    </ul>
</nav>

我在这个问题中尝试了解决方案Make image appear on link hover css，但它出现了一次

Answer 1

在pseudo

上使用hover元素

ul {
  list-style: none;
  border-width: 1px 0 1px 0;
  border-style: solid;
  text-align:center;
}
ul li {
  display: inline-block;
}
ul li a {
  display: block;
  padding: 15px;
  color: grey;
  text-decoration: none;
  position: relative;
}
ul li a:hover, ul li a.selected{
  color:red;
}
ul li a.selected:before, ul li a:hover:before {
  content: '';
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: red;
}

<nav>
  <ul>
    <li><a href="/ecomm/public" class="selected">HOME</a></li>
    <li><a href="about">ABOUT US</a></li>
    <li><a href="portfolio">PORTFOLIO</a></li>
    <li><a href="contact">CONTACT</a></li>
  </ul>
</nav>

Answer 2

尝试使用border-top http://jsfiddle.net/85d4tcjx/

进行此操作

ul{

text-align:center;
list-style-type:none;
}

li{
border-top:5px solid transparent;
margin-left:10px;
float:left;
}

li:hover{
border-top:5px solid black;
}

使用图片试试http://jsfiddle.net/85d4tcjx/3/

li:hover{
border-image:url('http://www.mycelticcrossstitch.com/celtic%20knot%20cross%20stitch.jpg') 30 30  round;
border-image-width:5px 0 0 0;
 }