悬停时元素焦点

我想创建一个按钮，其样式在悬停时发生变化，并保持这种状态，直到发生另一次悬停为止。基本上，我想创建一个按钮，其焦点通过悬停进行更改，如here。我想我可以通过一些功能来改变父母和孩子之间的状态，但是有没有更简单的方法来做到这一点？谢谢。悬停时元素焦点

class Button extends React.Component { 
 
    render() { 
 
    return (
 
     <button>{this.props.title}</button> 
 
    ); 
 
    } 
 
} 
 

 
class Parent extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <Button title={"button 1"}/> 
 
     <Button title={"button 2"}/> 
 
     <Button title={"button 3"}/> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 

 
ReactDOM.render(<Parent />, app);

button:hover { 
 
    background-color: yellow; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="app"></div>

来源

2017-10-22 Jimmy

*“从本质上讲，我想创建一个按钮，其焦点通过悬停改变“* - 但是，你是否真的想要设置（键盘）焦点，或者只是设计它的样式？ – nnnnnn

吉米我的男人你知道这里有多少次被问过吗？我们可以重复吗？ – Darkrum

[如何在CSS中使用'悬停']的可能重复（https://stackoverflow.com/questions/905033/how-to-use-hover-in-css） – Darkrum

的Parent是知道按钮的唯一地方，而且由于active变化需要持久，您需要更改状态：

class Button extends React.Component { 
 
    onHover =() => this.props.onHover(this.props.buttonId); 
 

 
    render() { 
 
    const { title, activeId, buttonId } = this.props; 
 
    
 
    return (
 
     <button onMouseOver={this.onHover} 
 
     className={ activeId === buttonId ? 'active' : '' }> 
 
     {title} 
 
     </button> 
 
    ); 
 
    } 
 
} 
 

 
class Parent extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    
 
    this.state = { 
 
     activeId: null 
 
    } 
 
    } 
 
    
 
    onButtonHover = (activeId) => this.setState({ activeId }); 
 

 
    render() { 
 
    const { activeId } = this.state; 
 
    
 
    return (
 
     <div> 
 
     <Button title={"button 1"} 
 
      onHover={this.onButtonHover} 
 
      buttonId={0} 
 
      activeId={ activeId } /> 
 
     <Button title={"button 2"} 
 
      onHover={this.onButtonHover} 
 
      buttonId={1} 
 
      activeId={ activeId } /> 
 
     <Button title={"button 3"} 
 
      onHover={this.onButtonHover} 
 
      buttonId={2} 
 
      activeId={ activeId } /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 

 
ReactDOM.render(<Parent />, app);

.active { 
 
    background-color: yellow; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="app"></div>

来源

2017-10-22 07:32:26

这里有一个可能的CSS唯一的解决办法：https://jsfiddle.net/ggcybu71/

.option:hover { 
    text-decoration: underline; 
} 
.option:hover:after { 
    content: ""; 
    display: block; 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    z-index: -1; 
}

这是太“哈克”，所以我只把它作为一种好奇心，我会可能不会在生产中使用它。我会实现一个基于Javascript的mousemove事件监听解决方案。

来源

2017-10-22 04:15:09

悬停时元素焦点

回答

相关问题