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

Question

当光标悬停时，如何在导航栏中的 SVG 中制作一个名称为 "expand" 部分的标签。为了让事情更清楚： 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

任何帮助都会很棒！

Answer 1

您可以通过 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 了解您的解决方案