Question

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

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

。选择的CSS类是基于向上和向下键事件动态设置的。非常感谢有关修复此问题的任何建议。感谢

Answer 1

嗯，兄弟选择器总是很棘手。鉴于您的样式适用于ul，li，您可以在:hover之前使用.selected使用与: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(); } } }：{/ p>

        <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标记的示例：

    <!-- Hide/show text here -->
    <div *ngIf="peoples[peoples?.length - 1]?.status">
       <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
    </div>

使用.hover选择器混合使用向上和向下键

1 个答案: