Question

我有一个div元素数组如下： -

var accdata = [];
for(var i = 0;i < returndata1.length;++i){
accdata.push(
<div className="data-main" onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>
    <span className="data-child">{returndata1[i].Project}</span>
    <span className={this.state.cls}>
        <span className="flag"></span>
        <span className="share"></span>
        <span className="star"></span>                  
    </span>
</div>
);
}

//toggle function
toggleHover(){
    this.setState({hover: !this.state.hover})
    if(this.state.hover === true){
        this.setState({cls: 'icon-display'})
    }
    else{
        this.setState({cls: ''})
    }
}

但是在鼠标悬停时，所有分区的span元素都会消失。如果我们将鼠标悬停在特定行上，只有该行的span元素消失，我该如何设置呢？

Answer 1

实现这一目标的最简单方法是使用css。以下是使用一些通用css类的示例：http://jsfiddle.net/9utga8ya/2/

阵营：

var accdata = [];
for(var i = 0;i < returndata1.length;++i){
    accdata.push(
        <div className="data-main">
            <span className="data-child">{returndata1[i].Project}</span>
            <span className="icon-display">
                <span className="flag"></span>
                <span className="share"></span>
                <span className="star"></span>                  
            </span>
        </div>
    );
}

CSS：

.data-main .icon-display {
    display: inline;
}

.data-main:hover .icon-display {
    display: none;
}

使用react js隐藏行的特定元素

1 个答案: