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

Question

如何使用光标在上悬停时，如何制作一个标签，其名称为，从导航栏中的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>

​​

任何帮助将是巨大的！

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您的解决方案