Html 使用带上下键的悬停选择器

我有以下CSS选择器，它们使用上下键或鼠标指针在查找列表中突出显示所选条目。问题是当同时使用键盘和鼠标时，多个条目会突出显示。下面是CSS条目

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

---

。所选CSS类是根据上下键事件动态设置的。如有任何关于解决此问题的建议，将不胜感激。谢谢

嗯，兄弟姐妹选择器总是很棘手的。 鉴于您的样式应用于

ul

，

li

，您可以在

之前使用
：hover
。选择
，使用家长的
：hover
技巧，如下所示：

@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();
        }
    }
}

这是一个html标记示例：

        <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>


项目

项目

项目

这是浏览器特定于用户的设置，您不希望更改用户的设置，因为他们通常有这样做的理由。特别是当他们失明的时候。谢谢你的反馈。应用以下样式后，它仍然突出显示两个条目，一个来自键盘选择，另一个来自鼠标悬停。这是html模板${item.title}${item.subTitle}@Faizal，我使用
ul
，
li
进行了假设。从html模板中，您应该相应地将SCS中的元素更改为
父元素
，
部分
。谢谢。我还发现鼠标悬停事件可以通过按键事件在节级别和取消高亮选择上实现。