javascript - 如何制作悬停时会扩展的标签？

鼠标悬停时，如何从导航栏中的SVG中制作一个名称为“展开”部分的标签。为了使事情更清楚：
here's a sketch of the wanted effect

/*this class is inside the <polyline> tag*/
.hover {
  opacity: 0.5 !important;
}
.hover:hover {
  opacity: 1 !important;
}
svg {
  width: 50%;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jquery.scrollTo.js" type="text/javascript"></script>
<script src="jquery.localScroll-1.4.0/jquery.localScroll.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
  <div id="firstPage">
    <div id="navbar">
      <!--these are the SVGs wrapped into an <a> tag-->
      <a href="#firstPage" id="a">
        <?xml version="1.0" encoding="utf-8"?>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Livello_1" x="0px" y="0px" viewBox="0 0 118.7 103.3" xml:space="preserve" enable-background="new 0 0 118.7 103.3">
          <style type="text/css">
            .st0 {
              fill: #FF3333;
            }
          </style>
          <polyline class="st0 hover" points="59.3 34.4 59.5 34.4 0.3 0 0.3 68.4 0.2 68.4 59.4 103.4 59.4 103.4 118.5 68.4 118.3 68.4 118.3 0 59.2 34.4 " />
        </svg>
      </a>
    </div>
  </div>
</div>

This is my code

任何帮助将是巨大的！

最佳答案

您可以通过CSS过渡来实现。看我的代码：

CSS：

    #container{
        width:180px;
        margin:0 auto;
        text-align:center;
    }

    svg {
      width: 50%;
    }
    a{
        text-decoration:none;
    }

    label{
        position:relative;
        left:-70px;
        top:-30px;
        color:#fff;
        text-transform:uppercase;
        background:red;
        transition: all 1s ease;
        z-index:-1;
    }

    svg:hover ~ label{
        left: -200px;
        transition: all 1s ease;
    }

另外，请确保在过渡中添加-webkit-，-moz-和-o-前缀，以确保它是跨浏览器。

有关解决方案，请参见DEMO

关于javascript - 如何制作悬停时会扩展的标签？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34963998/