Question

我正在使用Raphael创建一些SVG形状，当我将鼠标悬停在它们上面时，我将颜色设置为绿色但是当我使用按钮设置形状颜色时，即使我没有更改它，也会失去悬停状态。当我手动设置颜色时，有没有办法重置它或不覆盖它？

这是我的HTML

<style>
    #container path:hover {
        fill:   #556B2F;
    }
</style>

<div id="container"></div>
    <div>
        <button type="button" onClick="updateBox()" >Update</button>
        <button type="button" onClick="resetBox()">Reset</button>
    </div>
</div>

加载Raphael路径的代码

<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var paper = Raphael("container", 500, 150);

        var attr = {
            "fill": "#b9b9b9",
            "stroke": "black",
            "stroke-miterlimit": "4",
            "stroke-width": "2"
        };

        var box1 = paper.path("M50,10 150,10 150,100 50,100 50,10z").attr(attr);
        box1.node.id = "Box1";
        paper.path("M200,10 300,10 300,100 200,100 200,10z").attr(attr);
    };
</script>

最后我的功能是手动设置路径的颜色。

<script>
    function updateBox() {
        var county = document.getElementById('Box1');
        county.setAttribute('style', 'fill: red');
    };

    function resetBox() {
        var county = document.getElementById('Box1');
        county.setAttribute('style', 'fill: #b9b9b9');
    };
</script>

我尝试的最后一件事是从CSS中移除悬停并将突出显示分配给.onMouseOver和.onMouseOut但是当我使用按钮指定新的填充颜色时，悬停不再起作用。

Answer 1

<script>
    function updateBox() {
        var county = document.getElementById('Box1');
        //county.setAttribute('style', 'fill: red');
        county.classList.add('setRed');
    };

    function resetBox() {
        var county = document.getElementById('Box1');
        //county.setAttribute('style', 'fill: #b9b9b9');
        county.classList.add('setGray');
    };
</script>



<style>
    #container path:hover {
        fill:   #556B2F;
    }
    .setRed{
        fill: red;
    }
    .setGray{
        fill: #b9b9b9;
    }
</style>

如果您使用setAttribute并设置background或fill，则会修复此问题。

使用javascript Raphael我在点击按钮时设置填充颜色时会失去onhover

1 个答案: