Faizal Faizal - 3 years ago 132
Less Question

Using .hover selector mixing with up and down keys

I have following CSS selectors that highlight the selected entry in a lookup list either using up and down keys or mouse pointer. Issue is when using both keyboard and mouse, multiple entries are getting highlighted. Following here is the CSS entries.

&:hover, &.selected {
background: #205081;
label {
.title {
color: #fff;
}
.subTitle {
color: #ccc
}
}
}


.selected CSS class is dynamically set based on up and down key events.Any suggestions on fixing this issue would be much appreciated. Thanks

Answer Source

Well, sibling selector is always tricky. Given that your styles are applying to ul, li, you can take :hover prior to .selected using trick with parent's :hover like this:

@mixin high-light()
{
    background: #205081;
    label {
        .title {
            color: #fff;
        }
        .subTitle {
            color: #ccc
        }
    }
}
@mixin unhigh-light(){
    background: #fff;
    label {
        .title {
            color: #000;
        }
        .subTitle {
            color: #000
        }
    }
}
ul{
    &:hover{
        li{
            &.selected{
                @include unhigh-light();
            }
        }
    }
    li{
        &:hover, &.selected, &.selected:hover {
            @include high-light();
        }
    }
}

This is a sample of html markups:

        <ul>
            <li><label><span class="title">Item</span></label></li>
            <li class="selected">
                <label><span class="title">Item</span></label>
            </li>
            <li><label><span class="title">Item</span></label></li>
        </ul>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download