设为首页收藏本站
开启辅助访问 切换到宽版

小白教程

 找回密码
 立即注册
热搜: python PHP html
小白教程»小白交流区 › 技术交流区 › html5和css › a标签的使用问题
返回列表 发新帖
查看: 6432|回复: 4

[已解决]a标签的使用问题

[复制链接]
罗俊

1

主题

1

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2021-4-14 14:31:20 | 显示全部楼层 |阅读模式
当一个标签要添加悬停时，鼠标悬停不显示悬停样式，只有单击后才显示悬停样式，并且TAB的悬停效果可以切换。我想知道它是如何在不使用js的情况下切换样式的。

最佳答案
飞米
2021-5-19 02:29:14
也许a的优先级有问题，我的是好的
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .nav {
  10.             height: 41px;
  11.             border-top: 3px solid #ff8500;
  12.             border-bottom: 1px solid #edeef0;
  13.             background-color: #fcfcfc;
  14.             line-height: 41px;
  15.         }

  17.         .nav a {
  18.             display: inline-block;
  19.             /* 垂直对齐方式 */
  20.             vertical-align: top;
  21.             height: 41px;
  22.             padding: 0 20px;
  23.             font-size: 12px;
  24.             color: #4c4c4c;
  25.             text-decoration: none;
  26.         }

  28.         .nav a:hover {
  29.             color: orangered;
  30.             background-color: slategrey;

  32.         }
  33.     </style>
  34. </head>

  36. <body>
  37.     <div class="nav">
  38.         <a href="#">设为首页</a>
  39.         <a href="#">手机新浪网</a>
  40.         <a href="#">移动客户端</a>
  41.         <a href="#">博客</a>
  42.         <a href="#">微博</a>
  43.         <a href="#">关注我</a>
  44.     </div>
  45. </body>

  47. </html>
复制代码

本帖寻求最佳方案

，目前已有 4 个回复 我要奖励

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

鴻運當頭

0

主题

1

帖子

1

积分

新手上路

Rank: 1

积分
1
发表于 2021-4-21 04:26:39 | 显示全部楼层
单击此处可将活动样式添加到a标记的父元素中，并从兄弟节点中删除活动样式。
  1. <li onclick="change(this)"><a>xxxx</a></li>
  2. 点击后
  3. <li class="active" onclick="change(this)"><a>xxxx</a></li>
  4. function change (el) {
  5.   el.className = 'active
  6.   // 清空同级的actvie样式
  7. }
  8. css
  9. li.active a {
  10. color: red;
  11. }
复制代码
回复

使用道具 举报

特斯拉

0

主题

1

帖子

1

积分

新手上路

Rank: 1

积分
1
发表于 2021-4-28 19:59:43 | 显示全部楼层
悬停失败可能是由于pseudo类的优先级造成的
回复

使用道具 举报

泪只为宝贝流

1

主题

2

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2021-5-13 12:21:01 | 显示全部楼层
HTML + CSS可以做很多事情，包括很酷的旋转图形
其原理是Label标签控制一个单选按钮，然后使用Input:checked+。Box3属性选择器+兄弟选择器来控制样式
写一个简单的表栏开关，代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box {
  10.             width: 400px;
  11.             height: 100px;
  12.             border: 1px solid blue;
  13.             margin: 100px auto 0;
  14.         }
  15.         
  16.         .box2 {
  17.             width: 400px;
  18.             height: 300px;
  19.             border: 1px solid blue;
  20.             margin: 0 auto;
  21.         }
  22.         
  23.         .box1 {
  24.             width: 20%;
  25.             float: left;
  26.             height: 100%;
  27.             box-sizing: border-box;
  28.             border: 1px solid pink;
  29.         }
  30.         
  31.         .box3 {
  32.             display: none;
  33.             width: 100%;
  34.             height: 100%;
  35.         }
  36.         
  37.         input {
  38.             display: none;
  39.         }
  40.         
  41.         input:checked+.box3 {
  42.             display: block;
  43.             background-color: aqua;
  44.         }
  45.     </style>
  46. </head>

  48. <body>
  49.     <div class="box">
  50.         <label for="q1"> <div class="box1">1</div></label>
  51.         <label for="q2"> <div class="box1">2</div></label>
  52.         <label for="q3"> <div class="box1">3</div></label>
  53.         <label for="q4"> <div class="box1">4</div></label>
  54.         <label for="q5"> <div class="box1">5</div></label>
  55.     </div>
  56.     <div class="box2">
  57.         <input type="radio" name="w" id="q1" checked="checked">
  58.         <div class="box3">1</div>
  59.         <input type="radio" name="w" id="q2">
  60.         <div class="box3">2</div>
  61.         <input type="radio" name="w" id="q3">
  62.         <div class="box3">3</div>
  63.         <input type="radio" name="w" id="q4">
  64.         <div class="box3">4</div>
  65.         <input type="radio" name="w" id="q5">
  66.         <div class="box3">5</div>
  67.     </div>
  68. </body>

  70. </html>
复制代码
回复

使用道具 举报

飞米

0

主题

2

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2021-5-19 02:29:14 | 显示全部楼层 &
也许a的优先级有问题，我的是好的
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .nav {
  10.             height: 41px;
  11.             border-top: 3px solid #ff8500;
  12.             border-bottom: 1px solid #edeef0;
  13.             background-color: #fcfcfc;
  14.             line-height: 41px;
  15.         }

  17.         .nav a {
  18.             display: inline-block;
  19.             /* 垂直对齐方式 */
  20.             vertical-align: top;
  21.             height: 41px;
  22.             padding: 0 20px;
  23.             font-size: 12px;
  24.             color: #4c4c4c;
  25.             text-decoration: none;
  26.         }

  28.         .nav a:hover {
  29.             color: orangered;
  30.             background-color: slategrey;

  32.         }
  33.     </style>
  34. </head>

  36. <body>
  37.     <div class="nav">
  38.         <a href="#">设为首页</a>
  39.         <a href="#">手机新浪网</a>
  40.         <a href="#">移动客户端</a>
  41.         <a href="#">博客</a>
  42.         <a href="#">微博</a>
  43.         <a href="#">关注我</a>
  44.     </div>
  45. </body>

  47. </html>
复制代码
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )

GMT+8, 2024-9-20 15:07 , Processed in 0.029947 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】

快速回复 返回顶部 返回列表