a标签的使用问题

O平凡之人 2020-06-22 10:25:31
当给a标签添加hover后,鼠标悬停不显示hover中的样式,只有点击之后才显示hover中的样式,而且选项卡的hover效果可以切换。没有使用到js就能切换样式,我想知道这是什么原理。
...全文
13483 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
北辰// 2020-06-29
  • 打赏
  • 举报
回复
可能是a:hover优先级出现了问题,我这个是可以的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .nav { height: 41px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; background-color: #fcfcfc; line-height: 41px; } .nav a { display: inline-block; /* 垂直对齐方式 */ vertical-align: top; height: 41px; padding: 0 20px; font-size: 12px; color: #4c4c4c; text-decoration: none; } .nav a:hover { color: orangered; background-color: slategrey; } </style> </head> <body> <div class="nav"> <a href="#">设为首页</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> <a href="#">博客</a> <a href="#">微博</a> <a href="#">关注我</a> </div> </body> </html>
那谁呀撒 2020-06-28
  • 打赏
  • 举报
回复
html+css可以做到很多事情,包括炫酷的轮播图都没问题
原理就是label标签控制一个单选按钮,然后用input:checked+.box3属性选择器+兄弟选择器来控制样式
写了一个简单的table栏切换,代码如下:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 100px;
border: 1px solid blue;
margin: 100px auto 0;
}

.box2 {
width: 400px;
height: 300px;
border: 1px solid blue;
margin: 0 auto;
}

.box1 {
width: 20%;
float: left;
height: 100%;
box-sizing: border-box;
border: 1px solid pink;
}

.box3 {
display: none;
width: 100%;
height: 100%;
}

input {
display: none;
}

input:checked+.box3 {
display: block;
background-color: aqua;
}
</style>
</head>

<body>
<div class="box">
<label for="q1"> <div class="box1">1</div></label>
<label for="q2"> <div class="box1">2</div></label>
<label for="q3"> <div class="box1">3</div></label>
<label for="q4"> <div class="box1">4</div></label>
<label for="q5"> <div class="box1">5</div></label>
</div>
<div class="box2">
<input type="radio" name="w" id="q1" checked="checked">
<div class="box3">1</div>
<input type="radio" name="w" id="q2">
<div class="box3">2</div>
<input type="radio" name="w" id="q3">
<div class="box3">3</div>
<input type="radio" name="w" id="q4">
<div class="box3">4</div>
<input type="radio" name="w" id="q5">
<div class="box3">5</div>
</div>
</body>

</html>
_念_ 2020-06-24
  • 打赏
  • 举报
回复
hover失效 有可能是因为伪类的优先级的问题
chinaskysun 2020-06-23
  • 打赏
  • 举报
回复
<style type="text/css"> .link{ color:cornflowerblue; } .link:hover { color:red; } </style> <a class="link">鼠标移动到我这,我会变成红色</a>
jio可 2020-06-23
  • 打赏
  • 举报
回复
点击后给a标签的父级添加一个active,同时删除兄弟节点的active样式。 <li onclick="change(this)"><a>xxxx</a></li> 点击后 <li class="active" onclick="change(this)"><a>xxxx</a></li> function change (el) { el.className = 'active // 清空同级的actvie样式 } css li.active a { color: red; }
O平凡之人 2020-06-23
  • 打赏
  • 举报
回复
引用 1 楼 jio可的回复:
点击后给a标签的父级添加一个active,同时删除兄弟节点的active样式。 <li onclick="change(this)"><a>xxxx</a></li> 点击后 <li class="active" onclick="change(this)"><a>xxxx</a></li> function change (el) { el.className = 'active // 清空同级的actvie样式 } css li.active a { color: red; }
感谢你的回复。上面图片展示是通过css给a标签添加hover实现的切换效果,没有使用到js。我的疑问就是hover中的样式通常是是鼠标悬停后就会显示,但我这里给a标签添加hover后鼠标悬停不显示样式,点击之后才显示hover中的样式。并且可以像js那样达到切换效果。

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧