CODEWITHSUNDEEP
csshtmlmenuborder
aur0n
aur0n

Reputation: 473

Best way to hide previous border?

I have a menu with several div. Every div has a 1px left border. On hover, I change the background of the current div, but as you can see with the following JSFiddle, it's ugly that the previous (grey) border is still visible.

I would like to hide it when I'm on the current selected div. Any ideas?

Fiddle

<div id="main_menu">
    <div class="menu_item"><div class="link">Example</div></div>
    <div class="menu_item"><div class="link">Example</div></div>
    <div class="menu_item"><div class="link">Example</div></div>
    <div class="menu_item"><div class="link">Example</div></div>
</div>

To make it more clear, from this:

screen1

To this:

screen1

Possibly without using any JS.

Upvotes: 3

Views: 68

Answers (1)

Manish Mishra
Manish Mishra

Reputation: 12375

Change your .menu_item hover css to this:

#main_menu .menu_item:hover {
    background-color:#00437f;
    cursor:pointer;
    position:relative;
    left:-1px;
}

and to maintain text at its position update below css: 

#main_menu .menu_item:hover .link {
    color:#fff;
    border:0px;
    position:relative;
    left:1px;
}

Upvotes: 3

Related Questions