将鼠标悬停在按钮上会导致另一个按钮悬停在上面
React hover over button cause another button to be hovered over
很抱歉有这个标题,我想不出该如何简洁地表达。
所以我有一组按钮作为React组件的一部分:
export default class AdvancedSearch extends React.Component{
hover(){
}
render(){
return(
<div className="btn-group">
<button id="star1" type="button" className="btn btn-default" onMouseEnter={() => this.hover()}><span className="glyphicon glyphicon-star-empty"></span></button>
<button id="star2" type="button" className="btn btn-default" onMouseEnter={() => this.hover()}><span className="glyphicon glyphicon-star-empty"></span></button>
<button id="star3" type="button" className="btn btn-default" onMouseEnter={() => this.hover()}><span className="glyphicon glyphicon-star-empty"></span></button>
<button id="star4" type="button" className="btn btn-default" onMouseEnter={() => this.hover()}><span className="glyphicon glyphicon-star-empty"></span></button>
<button id="star5" type="button" className="btn btn-default" onMouseEnter={() => this.hover()}><span className="glyphicon glyphicon-star-empty"></span></button>
</div>
);
}
我想做的是,当我把鼠标悬停在一个按钮上时,它左边的所有按钮的背景都会发生变化,就好像它们也被悬停在上面一样。我不知道我可以在悬停函数中放入什么来实现这一点,也不知道这是否是实现这一目标的最佳方式。获得这种效果的最佳方法是什么?此外,当点击按钮时,我也希望能够做同样的事情。
使用组件状态和CSS类。
export default class AdvancedSearch extends React.Component{
getInitialState() {
return {
hoveredIndex: -1
};
}
hover(index){
this.setState({
hoveredIndex: index
});
}
leave() {
this.setState({
hoveredIndex: -1
});
}
render(){
var buttons = [];
for (var i = 0; i < 5; i++) {
let className = 'glyphicon';
if (i <= this.state.hoveredIndex)
className += ' glyphicon-star';
else
className += ' glyphicon-star-empty';
buttons.push(
<button id={'star'+(i+1)} type="button" className="btn btn-default" onMouseEnter={this.hover.bind(this, i)} onMouseLeave={this.leave}><span className={className}></span></button>
);
}
return(
<div className="btn-group">
{buttons}
</div>
);
}
你应该能够通过点击事件或任何其他形式的转变来激励自己;)
相关文章:
- 鼠标悬停事件影响列表中所有行中的按钮,而不仅仅是特定按钮
- Flexslider导航按钮在悬停时不可见,带有橙色框
- Facebook登录按钮悬停框
- 鼠标悬停时更改按钮的 CSS
- 将鼠标悬停在按钮上会导致另一个按钮悬停在上面
- 弹出 Div 显示在按钮悬停上
- 按钮悬停效果在不同的 Z 索引上
- 按钮悬停时触发弹出窗口
- 鼠标离开并不总是在我的按钮悬停时触发
- 使用按钮悬停使元素更改颜色
- 交叉褪色提交按钮悬停
- 自定义css单选按钮悬停效果
- CSS按钮:悬停,禁用,然后用javascript重新启用
- 图像与动画CSS +提交按钮悬停
- 如何禁用google +1(+1)按钮's悬停气泡
- Jquery悬停-允许悬停在按钮悬停的另一个DIV上
- 字体真棒社交媒体按钮悬停效果
- Twitter喜欢按钮悬停效果
- 定制';Pin it ';按钮悬停(我不使用博客或WordPress)
- jQuery隐藏li元素,然后在按钮悬停时淡入