Question

I have a menu on a site.
It has a divider on the right of the li, this is set as a background.
When you hover over this it disappears and the link is highlighted.

What i also want is the background of the li on the left to also disappear, how can i do this?

    .menu-link ul li    
{
    text-decoration:none;
    float:left;
    background: url(/Content/img/border-line-inside.png) no-repeat right;
}

.menu-link ul li a {
    color:#fff;
    padding: 0px 15px 0px 15px;
    line-height:40px;
    display: block;
    width:128px;
    text-align:center;
}

.menu-link a:hover{
    background:url(../img/menu-nav-hov.png) repeat-x;
    cursor:pointer; 
}

im guessing i might need to use jquery?

Answer 1

Since it’s not possible to select parent element, nor previous siblings in CSS, you’ll need jQuery indeed.

Something like this might get you in the right direction. (jQuery code might be improved, I’m no expert).

$(document).ready(function() {
    $('a').hover(function() {
        $(this).parent().prev().css('background','none');
    },
    function() {
        $(this).parent().prev().css('background','url(http://placekitten.com/10/20) no-repeat right');
    })
})