Question

使用css，javascript或jquery在从一个div悬停到另一个div时绘制一条简单的线条的最佳方法是什么？

非常感谢你的例子。

我找到了这段代码：

    h2 > a {
      position: relative;
      color: #000;
      text-decoration: none;
    }

    h2 > a:hover {
      color: #000;
    }

    h2 > a:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: #000;
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
    }

    h2 > a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }

来自http://tobiasahlin.com/blog/css-trick-animating-link-underlines/

但我不确切知道如何修改它以获得所需的解决方案......

Answer 1

以下是如何使用CSS实现这一目标的示例。根据您的需求进行调整。

.box {
    width: 100px;
    height: 100px;
    background: orange;
    display: inline-block;
    margin-right: 100px;
    position: realtive;
  cursor: pointer;
   
}

hr {
   position: absolute;
   top: 50px;
  right: -50px;
   left: -300px;
   width: 0px;
   height: 3px;
   background: orange;
   border: none;
    transition: all 3s;
}

.box:hover hr {
     width: 200px;
     transition: all 3s;
}

<div class="box"> 
    
    <hr>
</div>

<div class="box"></div> <br> <br>

Hover on the left box

Answer 2

                basic way:

            <!DOCTYPE html>
            <html>
            <head>
            <title>Page Title</title>
            <style>
            div {
    background: #ccc;
    margin: 20px ;
    padding:20px;
    display:inline-block;
    float:left;
    width:30px;
}

div:hover + hr{
    display:block !important;
    animation: .5s forwards hover-v linear;
  animation-fill-mode: forwards;
}
hr{
  width:150px;
  display:inline-block;
  float:left;
  margin-top:50px
}



            </style>
            </head>
            <body>
            <div class="div1">1</div>
    <hr style="display:none">
    <div class="div2">2</div>
    <hr style="display:none">
            </body>
            </html>

悬停时从一个div到另一个div绘制线条

2 个答案: