Sakura‎ 2024-04-12 19:48 采纳率: 76.9%
浏览 3
已结题

HTML代码优化，疑问解答

我想问一下，这样设计a:hover我是有点意外的，为什么鼠标停留时a标签已经有了高度和宽度，li也有一个宽高，但是整体的布局没有被撑开呢？

img

img

img

img

  • 写回答

4条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-04-12 19:48
    关注

    引自免费微信小程序：皆我百晓生

    在您提供的代码中，<a> 标签内的内容是绝对定位的，这导致了鼠标悬停时<a>标签虽然设置了宽度和高度，但实际布局并没有变化，因为其内部元素是脱离常规文档流的。为了实现鼠标悬停时整个<li>项的背景颜色变化，我们可以调整样式以消除绝对定位的影响，并使用伪类选择器来控制悬停效果。

    首先，我们移除.side_left, .side_middle, 和 .side_right 中的绝对定位属性，然后将这些元素设置为内联块（inline-block），并给<li>添加一些额外的样式来处理布局。以下是修改后的代码：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>网页平面UI设计学院</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font: 16px/1.25 "宋体";
        }
        div {
            width: 461px;
            margin: 100px auto 0;
        }
        ul {
            list-style-type: none;
            position: relative;
        }
        li {
            display: flex;
            align-items: center;
            height: 145px;
            background: url(img/bg.png);
            transition: background-color 0.3s ease;
        }
        a {
            text-decoration: none;
            color: white;
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        a:hover {
            background-color: rgba(219, 56, 61, 0.7);
            color: white;
        }
        .side_left,
        .side_middle,
        .side_right {
            display: inline-block;
            vertical-align: top;
        }
        .side_left {
            text-align: right;
            margin-right: 10px;
        }
        .side_middle {
            margin-right: 20px;
        }
        .side_right {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div>
        <h1>网页平面UI设计学院</h1>
        <p>HTML大神培训报名中</p>
        <ul>
            <li>
                <a href="#">
                    <span class="side_left">印刷流程<br>广告设计<br>企业形象设计</span>
                    <span class="side_middle">1</span>
                    <span class="side_right">平面设计</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="side_left">广告设计</span>
                    <span class="side_middle">2</span>
                    <span class="side_right">网页设计</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="side_left">页面设计<br>HTML+CSS<br>JS和JQ交互特效</span>
                    <span class="side_middle">3</span>
                    <span class="side_right">UI设计</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

    这个改动后，当鼠标悬停在 <a> 上，整个 <li> 的背景色会变为半透明的红色，同时文本颜色也会变为白色。这样就实现了您期望的效果。注意这里使用了 transition 属性来平滑过渡背景颜色的变化。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 5月11日
  • 已采纳回答 5月3日
  • 创建了问题 4月12日