css – 如何将鼠标悬停在SVG上?

前端之家收集整理的这篇文章主要介绍了css – 如何将鼠标悬停在SVG上?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在这片SVG(在FF 8中,在Safari 5.1中,Chrome 16,Mac上都是这样),当将鼠标移到栏上时,没有任何一个浏览器正确地检测到每个鼠标悬停/关闭事件,有时它工作有时它没有。但是在所有浏览器中都是一致的,所以这可能是SVG代码。使用onmouSEOver和onmouSEOut提供相同的结果 – 不能正常工作。

SVG矩形悬停的正确方法是什么?

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="600" version="1.1" style="display:inline">

<style type="text/css">
.bar {
    fill: none;
}
.bar:hover { 
    fill: red;
}
</style>
  <g>
   <rect class="bar" x="220" y="80" width="20" height="180" stroke="black" stroke-width="1" />
  </g>
</svg>

解决方法

发生的情况是,鼠标事件没有被检测到,因为填充是“无”,只需添加
.bar {
    fill: none;
    pointer-events: all;
}

然后它工作得很好。

猜你在找的CSS相关文章