Question

我需要将纯svg用于项目。我知道如何简单地使用div来获得这种效果，但我不知道如何使它与svg一起工作，我不知道我做错了什么。

当你将鼠标悬停在另一个多边形上时，我希望显示一个带有白色文本的隐藏黑色矩形（并且多边形是0.1的不透明度正常，并且在同一个悬停时变为0.8的不透明度）有点像工具提示，具有不透明度和漂亮平滑过渡，但纯SVG。

＆＃13;

.showme {
    opacity: 0.3;
}

.showme:hover {
    opacity: 0.8;    
}

.desc {
    visibility: hidden;
}

.showme:hover + .desc {
   visibility: visible;
}

＆＃13;

<svg width="200" height="200" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
    <rect x="1" y="1" width="998" height="298" fill="blue" class="showme"/>    
</svg>

<svg width="200" height="200" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1" class="desc" >
  <rect x="1" y="1" width="998" height="298" fill="black" />     
 <text x="250" y="150" font-family="Verdana" font-size="55" fill="white">Hello world!</text>
</svg>

＆＃13;

请帮忙：/

感谢。

Answer 1

保持你的svg，你可以这样做，但你需要做一些细微的改变：

Hello world!

https://jsfiddle.net/q6kkhvz7/2/

在另一个多边形悬停时显示带有文本的隐藏式矩形

1 个答案: