Question

我有以下基本代码，这里是jsfiddle：http://jsfiddle.net/fLZKc/

<div id="menu">
    <ul>
        <li>
            <a href="#" class="chat"><span>Chat</span></a>
        </li>
        <li>
            <a href="#" class="heart"><span>Heart</span></a>
        </li>
        <li>
            <a href="#" class="documentation"><span>Documentation</span></a>
        </li>
    </ul>
</div>

这个javascript：

var bubble = "M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z", 
    heart = "M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.174,24.132,7.971z", 
    documentation = "M26.679,7.858c-0.176-0.138-0.404-0.17-0.606-0.083l-9.66,4.183c-0.42,0.183-0.946,0.271-1.486,0.271c-0.753,0.002-1.532-0.173-2.075-0.412c-0.194-0.083-0.356-0.176-0.471-0.259c0.042-0.021,0.09-0.042,0.146-0.064l8.786-3.804l1.31,0.561V6.612c0-0.244-0.106-0.475-0.283-0.612c-0.176-0.138-0.406-0.17-0.605-0.083l-9.66,4.183c-0.298,0.121-0.554,0.268-0.771,0.483c-0.213,0.208-0.397,0.552-0.394,0.934c0,0.01,0.003,0.027,0.003,0.027v14.73c0,0.006-0.002,0.012-0.002,0.019c0,0.005,0.002,0.007,0.002,0.012v0.015h0.002c0.021,0.515,0.28,0.843,0.528,1.075c0.781,0.688,2.091,1.073,3.484,1.093c0.66,0,1.33-0.1,1.951-0.366l9.662-4.184c0.255-0.109,0.422-0.383,0.422-0.692V8.471C26.961,8.227,26.855,7.996,26.679,7.858zM20.553,5.058c-0.017-0.221-0.108-0.429-0.271-0.556c-0.176-0.138-0.404-0.17-0.606-0.083l-9.66,4.183C9.596,8.784,9.069,8.873,8.53,8.873C7.777,8.874,6.998,8.699,6.455,8.46C6.262,8.378,6.099,8.285,5.984,8.202C6.026,8.181,6.075,8.16,6.13,8.138l8.787-3.804l1.309,0.561V3.256c0-0.244-0.106-0.475-0.283-0.612c-0.176-0.138-0.407-0.17-0.606-0.083l-9.66,4.183C5.379,6.864,5.124,7.011,4.907,7.227C4.693,7.435,4.51,7.779,4.513,8.161c0,0.011,0.003,0.027,0.003,0.027v14.73c0,0.006-0.001,0.013-0.001,0.019c0,0.005,0.001,0.007,0.001,0.012v0.016h0.002c0.021,0.515,0.28,0.843,0.528,1.075c0.781,0.688,2.091,1.072,3.485,1.092c0.376,0,0.754-0.045,1.126-0.122V11.544c-0.01-0.7,0.27-1.372,0.762-1.856c0.319-0.315,0.708-0.564,1.19-0.756L20.553,5.058z";

$('.chat').each(function(i) {
    chat = Raphael($(this)[0], 40, 40)
    chat.path(bubble).attr({
        "fill" : "#333"
    })
})

$('.heart').each(function(i) {
    paper = Raphael($(this)[0], 40, 40)
    paper.path(heart).attr({
        "fill" : "#333"
    })
})
$('.documentation').each(function(i) {
    paper = Raphael($(this)[0], 40, 40)
    paper.path(documentation).attr({
        "fill" : "#333"
    })
})

我正在尝试在每个图标上附加悬停操作，这样如果用户将鼠标悬停在菜单项上，图标就会改变颜色。

如果我添加鼠标悬停，例如：

$('.chat').each(function(i) {
    chat = Raphael($(this)[0], 40, 40);
    chat.path(bubble).attr({
        "fill" : "#333"
    })
    chat.mouseover(function() {
        $(this).attr({
            "fill" : "#fff"
        });
    });
})

我收到错误，'未捕获TypeError：对象＃没有方法'鼠标悬停''

这样做的正确方法是什么？代码也可以简化吗？

Answer 1

这里有几个问题：

mouseover正被添加到Raphael论文（画布）中。它应该添加到形状中。
代码混合了Raphael形状引用和jQuery元素引用。在某些情况下，$(this)应替换为this，以引用该事件的所有者（Raphael形状）。
假设您在鼠标移出时遇到相反的行为，应该使用Raphael的hover将两个处理程序绑定到形状上。

让我们通过代码片段示例来概述这些：

$('.chat').each(function(i) {
    chat = Raphael($(this)[0], 40, 40);
    var shape = chat.path(bubble).attr({
        "fill": "#333"
    });
    shape.hover(function() {
        this.attr({
            "fill": "#fff"
        });
    }, function() {
        this.attr({
            "fill": "#333"
        });
    });
})

您可以参考updated jsFiddle进一步操纵它。

raphael图标悬停

1 个答案: