1

我正在努力将悬停效果应用于该父 div 内的父级和所有子级。我正在尝试关注但它不起作用..

   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>
           );
        }
      }

当鼠标悬停在孩子上时，它会影响孩子的特定部分而不是整个父 div。谁能告诉我如何使用 reactjs 实现这一目标

4

2 回答 2

1

在 css 中使用 * 和 > 选择器

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

如果您将容器（父级）悬停，则内部的所有第一级子元素都将获得应用的样式。

于 2020-02-26T11:53:28.123 回答
1

您的问题是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 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>);
    }
}
于 2020-02-26T12:12:16.860 回答