JavaScriptを使うRaphaelボタンで塗りつぶしの色を設定するときにオンホーを失う

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> 

最後に私の機能は、手動でパスの色を設定する

<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を設定した場合、それが修正されます。