鼠标悬停功能不起作用答案

【问题标题】：Mouseover function won't work鼠标悬停功能不起作用
【发布时间】：2012-07-16 15:01:26
【问题描述】：

我正在使用 Raphael 图形和动画，这是一个 javascript 库。我希望用户将鼠标悬停在底行中间列的蓝色方块上。当他们将鼠标悬停时，我希望蓝色框发光（拉斐尔函数）黑色。我正在尝试在 rec8 上使用此功能，但我认为我做得不对。有人可以更正我的代码或帮助我。谢谢。 :) 长寿和繁荣。

<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>

<style type="text/css"> 
#input
{
margin-top:-200px;

}
</style>

</head>

<body>

<div id="draw-here-raphael" style="height: 400px; width: 400px; background: #666; z-index:0;">
</div>

<div id="input" style="z-index:99;" >
  <input type="text" value="0"; style="text-align:right;" /><br />
</form> 
  </div>

<script type="text/javascript">
//all your javascript goes here
$(function() {
var r = new Raphael("draw-here-raphael"),

    // Store where the box is
    position = 'left',

    // Make our pink rectangle
    rec = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});

    $("rect").mouseover(function(e) {
        $(this).attr({"fill": "red"});
        });
    $("rect").mouseout(function(e) {
        $(this).attr({"fill": "#fbb"});
    }); 
    //first column
    rec2 = r.rect(30, 80, 50, 40, 5).attr({"fill": "blue"});
    rec3 = r.rect(30, 130, 50, 40, 5).attr({"fill": "blue"});
    rec4 = r.rect(30, 180, 50, 40, 5).attr({"fill": "blue"});
    rec5 = r.rect(30, 240, 50, 40, 5).attr({"fill": "blue"});
    //second column
    rec6 = r.rect(90, 80, 50, 40, 5).attr({"fill": "blue"});
    rec2 = r.rect(90, 130, 50, 40, 5).attr({"fill": "blue"});
    rec7 = r.rect(90, 180, 50, 40, 5).attr({"fill": "blue"});
    rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
        $("rec8").mouseover(function(e) {
        $(this).glow({width:10});
        });
    $("rec8").mouseout(function(e) {
        $(this).glow({width:0});
    }); 
    //third column
    rec9 = r.rect(150, 80, 50, 40, 5).attr({"fill": "blue"});
    rec10 = r.rect(150, 130, 50, 40, 5).attr({"fill": "blue"});
    rec11 = r.rect(150, 180, 50, 40, 5).attr({"fill": "blue"});
    rec12 = r.rect(150, 240, 50, 40, 5).attr({"fill": "blue"});
});

</script>

</body>
</html>

【问题讨论】：

你试过mouseeenter/mouseleave而不是mouseover/mouseout吗？这在大多数情况下效果要好得多。
@SvenBieder Raphael 有它自己的 mouseout / mouseover。 Raphael 没有mouseenter/mouseleave。

标签： javascript jquery css raphael mouseover

【解决方案1】：

这个选择器：

$("rec8")

是任何<rec8 /> 标签的jQuery 选择器。那些可能不存在。您应该将鼠标事件附加到返回的 raphael 元素：

rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
rec8.mouseover(function(e) {
    this.glow({width:10});
    });
rec8.mouseout(function(e) {
    this.glow({width:0});
});

但由于某种原因，当我将鼠标移出时它并没有消失

那是因为glow 返回了一个代表发光的新集合，因此您需要将其移除。来自Raphael documentation：

注意：辉光未连接到元素。如果您更改元素属性，它不会自行调整。

您需要跟踪返回的set，Raphael 作为辉光的一部分提供给您，并将其删除。可能是这样的：

var rec8 = r.rect(90, 240, 50, 40, 5).attr({"fill": "blue"});
var rect8glow;
rec8.mouseover(function(e) {
    rect8glow = this.glow({width:10});
    });
rec8.mouseout(function(e) {
    rect8glow.remove();
});

您可以看到here 的工作演示。

【讨论】：

令人印象深刻。这几乎奏效了，但是由于某种原因，当我将鼠标悬停时它并没有消失。当我继续回到那个广场时，光芒越来越暗。你知道如何解决这个问题吗？？
没关系。我想到了。我使用了删除方法。请 +1 我的问题，我会尽快批准您的回答。 :)
这里也有解决办法。 How to add and remove glow for Raphael element?
@StackOverflow 很高兴你明白了。我更新了我的答案以包含一个解决方案。
非常酷，jsfiddle 非常简洁。我将不得不玩弄它。 :)

【解决方案2】：

查看此小提琴以获取实时解决方案：http://jsfiddle.net/zhj2r/3/
正如 vcsjones 所说，您正在结合 jquery 和 raphael，但它们并不相关。
通过$(this)，您将 raphael 对象包装在 jquery 函数调用中，这是错误的，$('rec4') 不是有效的 jquery 选择器。
此外，glow 函数返回一组显示目标对象轮廓的 svg 路径，因此通过调用glow({width : 0})，您不会修改实际发光的宽度，而是生成另一个宽度为 0 的发光元素。
以下是我为使您的代码正常工作而修改的内容：

rec.mouseover(function(e) {
    this.attr({"fill": "red"});
});
rec.mouseout(function(e) {
    this.attr({"fill": "#fbb"});
}); 
// ...
rec8.mouseover(function(e) {
    // keep a reference to the glow object so you can remove it later
    this.theGlow = this.glow({width:10});
});
rec8.mouseout(function(e) {
    this.theGlow.remove();
});

【讨论】：