CODEWITHSUNDEEP
htmlcsshover
Fawzinov
Fawzinov

Reputation: 589

Showing image on hover over navigation bar

I'am newbie to CSS .. and i want to add an image of bar over each element in the navigation bar which appear on hover and over selected element like this

enter image description here

that's my 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>

I tried the solution in this question Make image appear on link hover css but it appeared once

Upvotes: 2

Views: 3669

Answers (2)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

use pseudo element on 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>

Upvotes: 3

Akshay
Akshay

Reputation: 14348

Try this i did it with 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;
}

With images try this 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;
 }

Upvotes: 0

Related Questions