Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/369.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在svg路径中悬停时出现一些弹出文本_Javascript_Jquery_Css_Svg - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 在svg路径中悬停时出现一些弹出文本

Javascript 在svg路径中悬停时出现一些弹出文本

javascript jquery css svg

Javascript 在svg路径中悬停时出现一些弹出文本,javascript,jquery,css,svg,Javascript,Jquery,Css,Svg,我想要一些在svg路径中悬停时的示例文本，有人能告诉我最简单的方法吗 以下是我的css代码： <style> path:hover{ fill:yellow;stroke:blue; } .available { fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1 } <

我想要一些在svg路径中悬停时的示例文本，有人能告诉我最简单的方法吗

以下是我的css代码：

<style>
path:hover{
    fill:yellow;stroke:blue;
}    
.available
{
    fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1
}
</style>


路径：悬停{
填充：黄色；笔划：蓝色；
}    
.可用
{
填充：无；填充规则：偶数；笔划：#000000；笔划宽度：1px；笔划线帽：对接；笔划线连接：斜接；笔划不透明度：1
}
以下是我的Html SVG代码：

<svg width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047">
    <a href=""><path name="path1" class="available" d="m 97.42857,852.3622 c 0,72.14286 0.71429,72.14286 0.71429,72.14286 l 55,23.57143 -0.71429,-95 z"/></path></a>
    <path name="path2" class="available" d="m 97.42857,809.50506 c 0,42.85714 0,43.57143 0,43.57143 l 55,-0.71429 0,-43.57142 z"/>
    <path name="path3" class="available" d="m 97.21429,766.3622 c 0,42.85714 0,43.57143 0,43.57143 l 55,-0.71429 0,-43.57142 z"/>
</svg>
最简单的方法是使用标题元素，UAs会将其转换为工具提示


示例文本1
示例文本2
示例文本3
我们如何为该文本应用css？你能建议我吗？你不能，但这不是问题中所述的要求。是的，但现在我想在弹出窗口中应用css，那么还有其他的编写方法吗！？您可以在
之前和
之后使用
伪
元素。按照您喜欢的方式设置元素的样式，然后使用该值更新content
css
属性。注意，使用纯css时，工具提示的自动定位将丢失。@iamcastelli您不能将pseudo与SVG一起使用