CSS 技巧：酷炫鼠标悬停效果，惊艳你的网站！

2023-11-27 11:49:24

用 CSS 轻松打造鼠标悬停高亮效果

让你的网站焕发活力

鼠标悬停高亮效果是网站设计中一种常见的技巧，可以让用户轻松发现所需信息，尤其是在浏览列表或菜单时。通常，这种效果是通过 JavaScript 实现的，但令人惊讶的是，使用纯 CSS 也能轻松实现。

HTML 结构

首先，让我们准备一个简单的 HTML 结构。以一个无序列表为例：

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

CSS 样式

接下来，我们使用 CSS 为列表添加高亮效果：

基本样式

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
}

悬停样式

li:hover {
  background-color: #eee;
}

这样，当鼠标悬停在列表项上时，它会变成浅灰色，实现高亮显示。

默认高亮

如果希望页面加载时第一项就高亮显示，可以使用：

li:first-child {
  background-color: #eee;
}

保持高亮

如果希望鼠标移出后列表项仍然高亮，可以使用：

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

在 Vue 项目中使用

在 Vue 项目中，也可以轻松使用 CSS 实现高亮效果：

<template>
  <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['选项 1', '选项 2', '选项 3']
    }
  }
}
</script>

<style>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
}

li:hover {
  background-color: #eee;
}
</style>