伪类选择器hover应用

最新推荐文章于 2025-06-12 11:23:36 发布

原创

最新推荐文章于 2025-06-12 11:23:36 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#技术天地 #html #css #web #前端

本文介绍了CSS中的hover伪类选择器，当鼠标悬停在元素上时，它可以改变元素的样式，如文字颜色和背景。通过示例代码，展示了如何使用hover实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

伪类选择器hover 主要是当鼠标悬停在某个元素上时，其样式会根据设定的属性进行变化，一般用于文字或是背景图片的修改；

说多了都是眼泪，直接上代码！

Eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a-day1</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            height:58px;
            width:960px;
            margin:60px auto;
            list-style: none;
        }
        ul li{
            width:120px;
            height:58px;
            float:left;
        }
        ul li a{
            display:inline-block;
            width:120px;
            height:58px;
            background:url("img/n