CSS 如何将鼠标悬停在 SVG 矩形上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9208244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hover over an SVG rect?
提问by milan
In this piece of SVG (tried in FF 8, Safari 5.1.2, Chrome 16, all on Mac), when moving mouse over the bar, none of the browsers properly detect each on-mouse-over/out event, sometimes it works sometimes it doesnt. But it's consistent across all the browsers so it's probably something about the SVG code. Using onmouseoverand onmouseoutgives the same result - doesn't work properly.
在这段 SVG 中（在 FF 8、Safari 5.1.2、Chrome 16、Mac 上都尝试过）中，当将鼠标移到栏上时，没有一个浏览器正确检测到每个鼠标悬停/退出事件，有时它可以工作有时它没有。但它在所有浏览器中都是一致的，所以它可能与 SVG 代码有关。使用onmouseover和onmouseout给出相同的结果 - 无法正常工作。
What would be the correct way of implementing on hover for SVG rectangles?
在 SVGrect角度悬停时实现的正确方法是什么？
<?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>
回答by Erik Dahlstr?m
What's happening is that the mouse events are not detected because the fill is 'none', just add:
发生的事情是由于填充为“无”而未检测到鼠标事件，只需添加：
.bar {
fill: none;
pointer-events: all;
}
Then it works just fine.
然后它工作得很好。
回答by fengshuo
fill: none; pointer-event: all;should work in most modern browsers, but IE9 and IE10 doesn't support pointer-events. Besides, you can also set pointer-events: fill, This fillvalue is SVG only, meaning the value of fillor visibilitydoesn't affect pointer events processing.
fill: none; pointer-event: all;应该适用于大多数现代浏览器，但 IE9 和 IE10 不支持pointer-events. 此外，您还可以设置pointer-events: fill，此fill值仅适用于SVG，表示fill或visibility不影响指针事件处理的值。
A workaround for IE9 and IE10 is to set CSS to fill: transparentif pointer-eventsis not supported (you can use Modernizr to detect browser features).
IE9 和 IE10 的解决方法是将 CSS 设置为fill: transparentif pointer-eventsis not supported（您可以使用 Modernizr 来检测浏览器功能）。
$("#rect").mouseenter(function() {
$(this).css("fill", "teal")
}).mouseout(function(){
$(this).css("fill","transparent")
})#rect {
fill: transparent;
stroke: blue;
stroke-width: 1px
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<svg width=300 height=300>
<rect id="rect" x=0 y=0 width=100 height=100></rect>
</svg>回答by fengshuo
.bar:hover {
fill: red !important;
}
回答by Supr
Try giving it a non-transparent fill.
尝试给它一个不透明的填充。
Also, the <style>needs to go outside the <svg>.
此外，<style>需要走出去<svg>。
回答by ParPar
Try do it through jQuery :
尝试通过 jQuery 来实现：
$(".bar").attr("disable","True");
$(".bar").css("background-color","Red");
$(".bar").mouseenter(function() {
$(this).attr("disable","False");
});
$(".bar").mouseleave(function() {
$(this).attr("disable","True");
});
Or alternatively :
或者：
$(".bar").hide();
$(".bar").css("background-color","Red");
$(".bar").mouseenter(function() {
$(this).show();
});
$(".bar").mouseleave(function() {
$(this).hide();
});
