Question

请你看一下this demo并告诉我为什么我无法在列表上悬停时添加填充效果？

<div id="canvas"></div>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<script>
window.onload = function () {
    var c = Raphael("canvas", 200, 200);
    var a = c.path("M50 50, L50,60, L60,60 L60,50 L50,50").attr({fill: "#000"});
    var b = c.path("M70 70, L70,80, L80,80 L80,70 L70,70").attr({fill: "#000"});
    var c = c.path("M90 90, L90,100, L100,100 L100,90 L90,90").attr({fill: "#000"});

};
jQuery('ul li').hover(function () {
    a.attr({fill: "#ccc" });
}, function () {
    a.attr({fill: "#000" });
});
</script>

Answer 1

window.onload是异步运行的，所以变量a，b，c必须在

之前声明

jQuery(document).ready(function(){

    var Draw = Raphael("canvas", 200, 200);

    var Letters = {
        a: Draw.path("M50 50, L50,60, L60,60 L60,50 L50,50").attr({fill: "#000"}),
        b: Draw.path("M70 70, L70,80, L80,80 L80,70 L70,70").attr({fill: "#000"}),
        c: Draw.path("M90 90, L90,100, L100,100 L100,90 L90,90").attr({fill: "#000"})
    }

    jQuery('ul li').each(function(){
        var letter = $(this).text().toLowerCase()
        , defaultColor = Letters[letter].attr("fill");

        $(this).hover(function(){
            Letters[letter].attr({fill: "#ccc" });
        }, function(){
            Letters[letter].attr({fill: defaultColor });
        });
    });

});

根据列表信件进行更新： Demo

关于使用Raphaël.js悬停在相关链接上的路径填充效果问题

1 个答案: