Question

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

这是代码段：

＆＃13;

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
        });

＆＃13;

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

＆＃13;

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”元素不占用屏幕上的任何空间。因此，任何鼠标操作都不起作用，因为它们的高度和宽度均为零。

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

2 个答案: