我想问一下,这样设计a:hover我是有点意外的,为什么鼠标停留时a标签已经有了高度和宽度,li也有一个宽高,但是整体的布局没有被撑开呢?
HTML代码优化,疑问解答
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
4条回答 默认 最新
关注 引自免费微信小程序:皆我百晓生
在您提供的代码中,
<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
属性来平滑过渡背景颜色的变化。本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报 编辑记录
悬赏问题
- ¥15 在获取boss直聘的聊天的时候只能获取到前40条聊天数据
- ¥20 关于URL获取的参数,无法执行二选一查询
- ¥15 液位控制,当液位超过高限时常开触点59闭合,直到液位低于低限时,断开
- ¥15 marlin编译错误,如何解决?
- ¥15 有偿四位数,节约算法和扫描算法
- ¥15 VUE项目怎么运行,系统打不开
- ¥50 pointpillars等目标检测算法怎么融合注意力机制
- ¥20 Vs code Mac系统 PHP Debug调试环境配置
- ¥60 大一项目课,微信小程序
- ¥15 求视频摘要youtube和ovp数据集