隐藏元素时show（）不起作用

Question

在此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> 

Answer 2

您不能将鼠标悬停在不可见元素或未显示元素上。 您可以将鼠标悬停在可见元素上，然后使用它来显示其他先前隐藏的元素。 或者，您可以将鼠标悬停在透明元素上并使其不透明。 所以代替

r.hover(
    function() {
        this.show();  // mouse hovers in
    },
    function() {
        this.hide(); // mouse hovers out
    }
);

你需要做

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

要记住的一件事是，调用hide（）会将“ display”值设置为“ none”。 而且“ display：none”元素不会在屏幕上占据任何空间。 因此，任何鼠标操作都不会对其起作用，因为它们的高度和宽度为零。