罗俊 发表于 2021-4-14 14:31:20

a标签的使用问题

当一个标签要添加悬停时，鼠标悬停不显示悬停样式，只有单击后才显示悬停样式，并且TAB的悬停效果可以切换。我想知道它是如何在不使用js的情况下切换样式的。

鴻運當頭 发表于 2021-4-21 04:26:39

单击此处可将活动样式添加到a标记的父元素中，并从兄弟节点中删除活动样式。
<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;
}

特斯拉 发表于 2021-4-28 19:59:43

悬停失败可能是由于pseudo类的优先级造成的

泪只为宝贝流 发表于 2021-5-13 12:21:01

HTML + CSS可以做很多事情，包括很酷的旋转图形
其原理是Label标签控制一个单选按钮，然后使用Input:checked+。Box3属性选择器+兄弟选择器来控制样式
写一个简单的表栏开关，代码如下:
<!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>

飞米 发表于 2021-5-19 02:29:14

也许a的优先级有问题，我的是好的
<!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>
页: [1]
查看完整版本: a标签的使用问题