Question

我在原来的问题上犯了一个错误（我的代码在我改变后没有工作），所以我改变了这个

我在父组件上动态创建一些径向元素，总是对（元素，元素悬停）

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>
    )
}

在son元素中，我在路径元素上使用该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“url（#gradientID）”并且悬停它将是 “URL（#gradientID）-hover”。

我知道我可以将旧属性解析为新的“url（＃gradientID-hover）”，但我想要有更好的方法来做到这一点

Answer 1

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

你尝试过这样的事吗？

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

1 个答案: