A:hover触发B元素的动画

是这样的,我打算做一个按钮的特效,具体如下:
初始状态是,class=line 的span标签处于整个main框体外(用样式来使他看起来像一条线)。
当 class=button 的a标签处于hover状态时,class=line 的span元素会向右移动直到和main框体左对齐,并且它的长度(width)变得和main框体一样长。

.button:hover .line这个写法是从 按钮特效-技术学习教程-慕课网 学的,看他老人家用得风生水起,不明白为何我用不了。

先行感谢想建议我用jq或者js实现的朋友。我还是想用css3实现,如果可以的话。

下面附上代码:

<!DOCTYPE html>
<html>
<head>
  <title>about</title>
  <meta charset="utf-8" />
  <style type="text/css">
    *{
      padding:0;
      margin:0;
    }
    a{
      text-decoration:none;
      color:#fff;
      margin:20px 0;
    }
    .main{
      background:#aaa;
      color:#fff;
      width:80px;
      height:100px;
      text-align:center;
      position:relative;
      left:200px;
      top:100px;
    }
    .main .inner{
      margin-top:50px;
      background:#4b260a;
      border-radius:2px;
    }
    .line{
      width:5px;
      height:2px;
      border:0;
      background:#000;
      position:absolute;
      top:40px;
      left:-100%;
      transition:0.3s ease-out;
      -ms-transition:0.3s ease-out;
      -o-transition:0.3s ease-out;
      -moz-transition:0.3s ease-out;
      -webkit-transition:0.3s ease-out;
    }
    .button:hover .line{
      width:100%;
      left:0;
    }
  </style>
</head>
<body>
  <div class="main">
    <a href="#" class="button">按钮<div class="inner">button</div></a>
    <span class="line"></span>
  </div>
</body>
</html>
阅读 7.7k
评论
    1 个回答

    .button:hover .line这样写是后代选择器,你的子孙元素有这个类吗?

    解决方案:

    使用相邻兄弟选择器:.button:hover + .line

      撰写回答

      登录后参与交流、获取后续更新提醒