使用 JQuery/Reactjs 在元素悬停时切换样式属性

Question

我在最初的问题上犯了一个错误（我的代码在我更改后无法运行），所以我更改了这个

我在父组件处动态创建了一些radial-element，总是成对的（element, element-hover）

render: function() {
    var gradientID = "gradient" + this.props.c.id;
    var gradientID_hover = gradientID +"-hover"

    return (
        <g className={this.props.c.id}> 
            <defs>
                <radialGradient id={gradientID} fx="50%" fy="50%" r="65%" spreadMethod="pad">
                  <stop offset="0%"   stopColor={this.props.c.color[0]} stopOpacity="0.8"/>
                  <stop offset="100%" stopColor={this.props.c.color[1]} stopOpacity="1" />
                </radialGradient>

                <radialGradient id={gradientID_hover}   fx="50%" fy="50%" r="65%" spreadMethod="pad">
                  <stop offset="0%"   stopColor={this.props.c.color[3]} stopOpacity="0.8"/>
                  <stop offset="100%" stopColor={this.props.c.color[4]} stopOpacity="1" />
                </radialGradient>
            </defs>
        </g>
    )
}

在子元素中，我在 path 元素上使用该 id，如下所示：

render: function() {
    var fillURL = "url(#"+this.props.gradientID+")";
    return (
        <g className={this.props.country.id}>
            <path stroke="#000000" fill={fillURL} d={this.props.country.path} strokeOpacity="0.25" strokeWidth="1.5"></path>
        </g>    
    );
}

如何在悬停时更改路径的填充属性？我尝试过这样的事情：

componentDidMount: function() {
    var element = this.getDOMNode().firstChild;
    $(element).hover(function(){
        element.backup = element.style.fill;
        element.style.fill = element.backup+"-hover";

    }, function(){
        element.style.fill = element.backup;
    });
},

并且没有工作，因为该属性包含整个网址“url（#gradientID）”并且悬停它将是 “url(#gradientID)-悬停”。

我知道我可以将旧属性解析为新属性“url(#gradientID-hover)”，但我希望有更好的方法来做到这一点

Answer 1

$('yourID').hover(function(){ $('targetID').css('targetAttr','attrVal') });

你尝试过这样的事情吗？