隱藏元素時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”元素不會在屏幕上占據任何空間。 因此，任何鼠標操作都不會對其起作用，因為它們的高度和寬度為零。