鼠标点击li显示被选中

你可以使用 CSS 的 `:active` 伪类来实现点击 `li` 元素时的样式变化。例如：

<style>
  li:active {
    background-color: yellow;
  }
</style>

<ul>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

当你点击其中一个 `li` 时，它的背景色会变为黄色。注意，这种效果只在鼠标按下时出现，松开后恢复正常样式。如果需要保持选中状态，可以使用 JavaScript 来实现。

相关问题

CSS如何实现鼠标点击li显示被选中并保持选中状态

你可以使用CSS中的`:active`伪类和`:focus`伪类来实现鼠标点击li元素时被选中并保持选中状态。

首先，使用`:active`伪类来定义当点击li元素时应用的样式，例如：

li:active {
  background-color: #ccc;
}

这将使li元素在被点击时具有灰色背景色。

然后，使用`:focus`伪类来定义当li元素获得焦点时应用的样式，例如：

li:focus {
  outline: none;
  background-color: #ccc;
}

这将使li元素在获得焦点时具有灰色背景色，并且删除默认的蓝色边框。

请注意，`:focus`伪类只适用于可获取焦点的元素，如a、input等。如果要使li元素可获取焦点，请为其添加tabindex属性，例如：

<li tabindex="0">列表项</li>

这样，用户就可以使用键盘导航到li元素并将其选中。

最后，为了保持选中状态，您可以使用JavaScript在li元素被点击时添加一个类，例如：

li.selected {
  background-color: #ccc;
}

然后，您可以在JavaScript中使用以下代码来添加和删除该类：

// 获取所有li元素
const lis = document.querySelectorAll('li');

// 为每个li元素添加点击事件监听器
lis.forEach(li => {
  li.addEventListener('click', () => {
    // 删除所有li元素的selected类
    lis.forEach(li => {
      li.classList.remove('selected');
    });
    // 为被点击的li元素添加selected类
    li.classList.add('selected');
  });
});

这样，当用户点击li元素时，它将获得selected类，并保持选中状态，直到用户单击其他li元素。

html如何实现点击li实现选中

在 HTML 中，可以使用以下方法来实现点击 `li` 时选中：

1. 使用 JavaScript：使用 `onclick` 事件监听 `li` 元素的点击事件，然后在事件处理程序中添加选中样式。

<ul>
  <li onclick="selectItem(this)">Item 1</li>
  <li onclick="selectItem(this)">Item 2</li>
  <li onclick="selectItem(this)">Item 3</li>
</ul>

<script>
function selectItem(item) {
  // 移除所有已选中的元素的样式
  var selectedItems = document.querySelectorAll('li.selected');
  for (var i = 0; i < selectedItems.length; i++) {
    selectedItems[i].classList.remove('selected');
  }

  // 添加选中样式
  item.classList.add('selected');
}
</script>

2. 使用 CSS：使用 `:hover` 和 `:focus` 伪类选择器来添加选中样式。这种方法只能在鼠标点击后保持选中状态，无法在用户使用键盘时保持选中状态。

<style>
li:hover, li:focus {
  background-color: #ccc;
}
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

注意：以上两种方法都需要添加 CSS 样式来定义选中状态的样式。