Question

我正在尝试使用CSS设置样式，但是我不知道如何使其看起来像link above中的选择框，但是CSS不允许我更改选项的背景颜色。任何帮助将非常感激。

Answer 1

您可以使用所需的样式制作活动课程

例如

.current {
     color: green;
     .icon { 
         opacity: 1;
     }
}

，然后根据当前单击的内容添加该类或删除该类

const newest = document.querySelector('newestElt')
newest.addEventListener('click', () => {  
   removeClass();
   newest.classList.add('current');
}

function removeClass() {
    const navItems = document.getElementsByClassName('navItems');
    var navArray = [].slice.call(navItems);
    navArray.forEach(item => {
        document.querySelector('a').classList.remove('current');
    });
}

可能有一个更简洁，更短的解决方案，但这会起作用

Answer 2

如果您希望在用户悬停时更改颜色，请尝试：

.elementname:hover {
color: #ffffff;
}

或（对于某些选项）

li.selected a { 
color: #ffffff; 
}

只需更改颜色并将它们作为列表即可。

如何设置选择框的样式，如下所示：https://postimg.cc/image/tm5jzc6g7/

2 个答案: