реагировать: применить наведение на все элементы внутри родительского div - PullRequest
Новая
       5

реагировать: применить наведение на все элементы внутри родительского div

0 голосов
/ 26 февраля 2020

Я изо всех сил пытаюсь применить эффект наведения на родителя и всех потомков внутри этого родительского 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

Ответы [ 2 ]

1 голос
/ 26 февраля 2020

Ваша проблема 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>);
    }
}
0 голосов
/ 26 февраля 2020

Используйте селектор * и> в css

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

Если вы наведите контейнер (родительский элемент), то все дочерние элементы первого уровня внутри получат примененные стили.

...