Question

我有一个项目列表。用户可以通过单击选择项目。我想使用CSS更改所选项目的颜色。假设用户点击了item1，那么item1将变为红色。现在，如果用户点击第2项，则item2将变为红色。我的HTML代码：

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

Answer 1

为每个tabindex元素添加li可以应用:focus伪类：

li:focus {
  color: red;
  outline: none;
}

<ul>
  <li tabindex=1>item1</li>
  <li tabindex=1>item2</li>
  <li tabindex=1>item3</li>
</ul

Answer 2

您只需使用：focus伪选择器

即可使用CSS执行此操作

li:focus{
  color:red;
  outline:none;
}

这要求元素可以集中。添加选项卡索引可能适合您正在执行的操作并且可以正常工作。

<ul>
  <li tabindex="0">item1</li>
  <li tabindex="0">item2</li>
  <li tabindex="0">item3</li>
</ul>

这是一个关于哪些元素得到关注的答案： Which HTML elements can receive focus?

http://jsbin.com/nokiyapejo/edit?html,css,js,output

Answer 3

您可以将元素变成按钮。

从按钮中删除默认样式：

online: none;
border: none;
background: none;

然后应用通常的按钮 :focus 或 :active 选择器。

示例如下：

HTML：

<button>test1</button>
<button>test2</button>
<button>test3</button>

CSS：

button{
  width: 100px;
  height: 100px; 
  background: lightgray;
  outline: none;
  border: none;
}

button:hover{
  color: red; 
  cursor: pointer;
}

button:focus, button:active{
  background-color: pink;
  color: white; 
}

这里是代码笔：https://codepen.io/dmitrisan/pen/PomdRBG

记住：您可以通过 CSS 规则将 BUTTON 转换为 div 或 span 标签，但所有 BUTTON 伪选择器仍将适用。

编程是史诗般的！你制定规则！ =)

使用CSS更改所选项目的颜色

3 个答案: