反应：将悬停应用于 parent div 内的所有元素

Question

我正在努力对 parent 和 parent div 内的所有 child 应用悬停效果。我正在尝试关注但它不起作用..

   function changeBackground(e) {
     e.target.style.backgroundColor = "#ff6f00";
     e.target.style.color = "#ffffff";   
      }
   function resetBackground(e){
    e.target.style.backgroundColor = "#ffffff";
   e.target.style.color = "#616161";
    }
    class InfoBlogs extends React.Component{
      render(){
       return(
         <div id = "parent" style = { styles.parentCard } onMouseOver={changeBackground} 
          onMouseLeave={resetBackground}>
             <div style={ styles.child1Card } id = "head">
             <div style = { styles.c11 }>
                 <h2 style={styles.cardTitle}>Challenge</h2>
             </div>
             <div style = { styles.c12 } id = "footer">
                 <IoIosLogIn style={ styles.iconStyle } />
             </div>
             </div>
             <div style={ styles.child2Card }>
                <p style={ styles.cardContent }>  The sky is pink.</p>
             </div>    
           </div>
           );
        }
      }

当鼠标悬停在 child 上时，它会影响 child 的特定部分，而不是整个 parent div。谁能告诉我如何使用 reactjs

实现此目的

Answer 1

在 css

中使用 * 和 > 选择器

.container:hover > * { /* your hover styles */ }

如果将鼠标悬停在容器（父级）上，则其中的所有第一级子元素都将应用样式。

Answer 2

您的问题是 e.target 它并不总是绑定到该事件的元素。在这种情况下，您必须使用 currentTarget，它始终是绑定到事件的元素，即使事件在子元素上也是如此。

改为：

function changeBackground(e) {
     e.currentTarget.style.backgroundColor = "#ff6f00";
     e.currentTarget.style.color = "#ffffff";   
}
function resetBackground(e){
    e.currentTarget.style.backgroundColor = "#ffffff";
    e.currentTarget.style.color = "#616161";
}

我建议您将函数作为方法放入下面的 class 检查中：

class InfoBlogs extends React.Component{
      constructor(props){
         super(props);
         this.changeBackground = this.changeBackground.bind(this);
         this.resetBackground = this.resetBackground.bind(this);
      }
      changeBackground(e) {
        e.currentTarget.style.backgroundColor = "#ff6f00";
        e.currentTarget.style.color = "#ffffff";   
      }
      resetBackground(e){
        e.currentTarget.style.backgroundColor = "#ffffff";
        e.currentTarget.style.color = "#616161";
      }
      render(){
       return(
          <div id="parent" style={ styles.parentCard } 
               onMouseOver={this.changeBackground} 
               onMouseLeave={this.resetBackground}>
             ...   
           </div>);
    }
}

或者您可以使用 `React.createRef()` 以获得更好的用法：

class InfoBlogs extends React.Component{
      constructor(props){
         super(props);
         this.parentRef = React.createRef();
         this.changeBackground = this.changeBackground.bind(this);
         this.resetBackground = this.resetBackground.bind(this);
      }
      changeBackground(e) {
        this.parentRef.current.style.backgroundColor = "#ff6f00";
        this.parentRef.current.style.color = "#ffffff";   
      }
      resetBackground(e){
        this.parentRef.current.style.backgroundColor = "#ffffff";
        this.parentRef.current.style.color = "#616161";
      }
      render(){
       return(
          <div id="parent" ref={this.parentRef} style={ styles.parentCard } 
               onMouseOver={this.changeBackground} 
               onMouseLeave={this.resetBackground}>
             ...   
           </div>);
    }
}

反应：将悬停应用于 parent div 内的所有元素

react : apply hover to all elements inside parent div

hover

reactjs

在 css

或者您可以使用 React.createRef() 以获得更好的用法：

或者您可以使用 `React.createRef()` 以获得更好的用法：