悬停在导航栏上时显示图像

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

试试这个我用 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;
 }

Answer 2

在 hover

上使用 pseudo 元素

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>

悬停在导航栏上时显示图像

Showing image on hover over navigation bar

html

css

hover