Javascript 如何使标签在悬停时展开？

当用光标悬停时，如何从导航栏中的SVG中创建一个标签，该标签的名称为“展开”。为了让事情更清楚：

/*此类位于标记内*/
.悬停{
不透明度：0.5！重要；
}
.悬停{
不透明度：1！重要；
}
svg{
宽度：50%；
浮动：对；
}

您可以通过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-前缀添加到转换中，以确保它是交叉浏览器

有关您的解决方案，请参阅
问题中的代码将很快关闭。请添加一些代码。谢谢，但是当我把标签放出来的时候，它就不再工作了。我想将导航栏的背景颜色设置为与背景相同，以便标签在SVG后面不可见。这可能吗？CSS特性被写成svg:hover~label。如果将标签移出，则必须更改特异性，以便它能够到达标签。你没有在代码中提供标签，所以我把它放在我认为更有意义的地方。@ashrafs。我更新了演示以获得不同的特性。每次更改HTML时，都需要更新CSS。就是这样works@ashrafs. 我会考虑我的第一个解决方案，而不是标签。原因是如果将标签放在超链接范围之外，就会失去链接的能力。唯一的问题是，我找不到有效地将标签隐藏在SVG后面的方法。如果我用“px”单元定位它们，它将无法在不同的屏幕分辨率下工作。