javascript - 当元素隐藏时 show() 不起作用

Question

In this jsfiddle目标是当鼠标悬停在矩形上时显示矩形，否则隐藏它。问题是，一旦矩形被隐藏，它在悬停时就不再显示。有什么想法吗？

这是代码片段:

var paper = Raphael("canvas", 200, 200); 

    var r = paper.rect(5,5, 20, 20);
		
    r.attr({ "fill" : "red" });
       		
    r.hover(
        function() {
            this.show();  // mouse hovers in
        },
        function() {
            this.hide(); // mouse hovers out
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<div id="canvas"></div>

Answer 1

当您隐藏一个元素时，从技术上讲，您不再悬停在该元素上。这是因为 hide() 设置了 display:none

您可以使用opacity使其透明而不是隐藏它

http://jsfiddle.net/gnbkqhus/1/

var paper = Raphael("canvas", 200, 200); 

var r = paper.rect(5,5, 20, 20);

r.attr({ "fill": "red", "opacity" : "0" });
       		
r.hover(
    function() {
        r.attr({ "opacity" : "1" });
    },
    function() {
        r.attr({ "opacity" : "0" });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<div id="canvas"></div>