CODEWITHSUNDEEP
css
gandalf3
gandalf3

Reputation: 1666

Is it possible to display dividers on hover using only CSS?

Using the technique from this post, I have a nice justified menu bar.

However, I would like to add dividers between the entries which appear on mouse hover.

My first attempt turned out quite terrible:

<div id="menu">
    <ul>
        <li>
            Item
        </li>
        <li>
            Menu
        </li>
        <li>
            Link
        </li>
        <li>
            Asdf
        </li>
      </ul>

        <span></span>
</div>

#menu {
    text-align: justify;
    background-color:gray;
    padding:5px;
}

#menu * {
    display: inline;
}

#menu li {
    display: inline-block;
    color:white;
}

#menu ul {
    padding-left:0px;
    margin:0px 100px;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

#menu li:hover {
    color:blue;
    border-left:1px solid black;
    border-right:1px solid black;
}

The problem with the above is that the borders are not centered between the menu entries.

This is certainly doable with javscript, but I would like to know if it's possible with pure CSS.

Upvotes: 0

Views: 264

Answers (2)

Cam
Cam

Reputation: 1902

One thing you can do to fix this is to add padding in your li.

#menu li {
    display: inline-block;
    color:white;
    padding: 0 20px;
}

Then in your hover call the same padding but also 

 #menu li:hover {
     color:blue;
     border-left:1px solid black;
     border-right:1px solid black;

 }

Problem with this is it creates a slight dither in the other nav items. So you can add -1 margin to fix that if you care to. This is what I think you are going for. If I am not correct elaborate more on your issue.

Here are the edits with the input i received. I also included a transition.

#menu li {
    display: inline-block;
    color:white;
    padding: 0 20px;
    border-left:1px solid rgba(255, 255, 255, 0);
    border-right:1px solid rgba(255, 255, 255, 0);
}

Hover state

#menu li:hover {
    transition: border-color 0.5s ease;
    color:blue;
    border-left:1px solid rgba(255, 255, 255, 1);
    border-right:1px solid rgba(255, 255, 255, 1);
}

Thank you Dieodius

Jsfiddle http://jsfiddle.net/cornelas/FtVM7/10/

Upvotes: 1

DaniP
DaniP

Reputation: 38252

The problem here is the technique you choose isn't able to fill the entire space with the elements just make a distribution. If you don't have to support IE7 or lower I suggest to go with the table-cell solution then the border can work the way you want:

#menu li {
    display: table-cell;
    width:1%;
    color:white;
    border:1px solid transparent;
    text-align:center;
    cursor:pointer;
}

Check this Demo

Upvotes: 2

Related Questions