懸停時元素焦點

我想創建一個按鈕，其樣式在懸停時發生變化，並保持這種狀態，直到發生另一次懸停爲止。基本上，我想創建一個按鈕，其焦點通過懸停進行更改，如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

懸停時元素焦點

回答

相關問題