悬停效果发生在所有文章上，而不仅仅是我悬停的文章

Question

我正在制作我的小作品集页面，并想在我的“关于”页面上添加一些背景/有趣的东西。现在，它一次显示所有 4 个文章列的信息，而不仅仅是我悬停的那个。

这是我的代码和逻辑。

import React, { useState } from 'react';
import './About.css'

const About = () => {

    const [inHover, setHover] = useState(false)

    return (
        <div className="about">
            <div className="about__container">
            <h1 className="about__headline">Just Human Things...</h1>
                <div className="about__columns">
                                    
                    <article 
                        className="about__column" 
                        onMouseEnter={() => setHover(true)} 
                        onMouseLeave={() => setHover(false)}>
                        <h4>History</h4>
                        {inHover && 
                            <div>
                                <br></br>
                                <ul>
                                    <li>B.S. - Pre-Medical Biology</li>
                                    <li>A.P. - Ayurvedic Practitioner</li>
                                    <li>RYT-500 - Ayurvedic Yoga</li>
                                    <li>C.H. - Clinical Herbalist</li>
                                    <li>L.D.T. - Lymph Drainage Therapist</li>
                                    <li>Nutritionist</li>
                                </ul>
                                <br></br>
                                <p>Flipped my whole career field from health and nutrition into tech, October 2020, without any previous experience in coding, and I've been engrossed ever since! I know I still have a lot to learn, but I'm ready to absorb all I can!</p>
                            </div>
                        }
                    </article>

                    <article 
                        className="about__column" 
                        onMouseEnter={() => setHover(true)} 
                        onMouseLeave={() => setHover(false)}>
                        <h4>Hobbies</h4>
                        {inHover && 
                            <div>
                                <br></br>
                                <ul>
                                    <li>Being cozy is my favorite emotion</li>
                                    <li>House plant care and husbandry</li>
                                    <li>18th Century cooking and recipes</li>
                                    <li>Building relationship and rapport with Ravens</li>
                                    <li>World of Warcraft/Diablo III</li>
                                    <li>Marie Kondo-inspired organizing</li>
                                    <li>Watercolor and Acrylic painting</li>
                                    <li>Connecting with nature through ritual</li>
                                </ul>
                            </div>
                        }
                    </article>

                    <article className="about__column" 
                        onMouseEnter={() => setHover(true)} 
                        onMouseLeave={() => setHover(false)}>
                        <h4>What I'm looking for</h4>
                        {inHover &&
                            <div>
                                <p>...in a work environment: </p>
                                <br></br>
                                <ul>
                                    <li>Collaborative atmosphere</li>
                                    <li>Autonomy and trust</li>
                                    <li>Appreciates my playful enthusiasm</li>
                                    <li>Loves my creative/innovative ideas</li>
                                    <li>Conducive to skills improvement</li>
                                    <li>Clear communication</li>
                                    <li>Mentorship</li>
                                </ul>
                            </div>
                        }
                    </article>

                    <article className="about__column" 
                        onMouseEnter={() => setHover(true)} 
                        onMouseLeave={() => setHover(false)}>
                        <h4>Personality Traits: </h4>
                        {inHover && 
                            <div>   
                                <br></br>
                                <ul>
                                    <li>ENTHUSIASM!</li>
                                    <li>Able to discuss and resolve conflict</li>
                                    <li>Inclusive and team-oriented</li>
                                    <li>Asks questions until confident in what is expected of me</li>
                                    <li>Curious and inquisitive</li>
                                    <li>Takes responsibility for actions</li>
                                    <li>Empathetic and emotionally intelligent</li>
                                    <li>Accept when I'm wrong</li>
                                    <li>Excellent in written and oral communication</li>
                                    <li>Acknowledges shortcomings and works to improve</li>
                                </ul>
                            </div>
                        }
                    </article>

                </div>
            </div>
        </div>
    );
}

export default About;

Answer 1

看起来是因为所有部分都依赖于相同的状态。因此，一旦该状态发生变化，所有部分都会受到影响。我将如何解决这个问题是让状态保持当前悬停的部分。例如

const About = () => {

    const [hoverOn, setHover] = useState("")

    return (
        <div className="about">
            <div className="about__container">
            <h1 className="about__headline">Just Human Things...</h1>
                <div className="about__columns">
                                    
                    <article 
                        className="about__column" 
                        onMouseEnter={() => setHover("history")} 
                        onMouseLeave={() => setHover("")}>
                        <h4>History</h4>
                        {hoverOn === "history" && 
                            <div>
                                <br></br>
                                <ul>
                                    <li>B.S. - Pre-Medical Biology</li>
                                    <li>A.P. - Ayurvedic Practitioner</li>
                                    <li>RYT-500 - Ayurvedic Yoga</li>
                                    <li>C.H. - Clinical Herbalist</li>
                                    <li>L.D.T. - Lymph Drainage Therapist</li>
                                    <li>Nutritionist</li>
                                </ul>
                                <br></br>
                                <p>Flipped my whole career field from health and nutrition into tech, October 2020, without any previous experience in coding, and I've been engrossed ever since! I know I still have a lot to learn, but I'm ready to absorb all I can!</p>
                            </div>
                        }
                    </article>

                    <article 
                        className="about__column" 
                        onMouseEnter={() => setHover("hobbies")} 
                        onMouseLeave={() => setHover("")}>
                        <h4>Hobbies</h4>
                        {hoverOn === "hobbies" && 
                            <div>
                                <br></br>
                                <ul>
                                    <li>Being cozy is my favorite emotion</li>
                                    <li>House plant care and husbandry</li>
                                    <li>18th Century cooking and recipes</li>
                                    <li>Building relationship and rapport with Ravens</li>
                                    <li>World of Warcraft/Diablo III</li>
                                    <li>Marie Kondo-inspired organizing</li>
                                    <li>Watercolor and Acrylic painting</li>
                                    <li>Connecting with nature through ritual</li>
                                </ul>
                            </div>
                        }
                    </article>

                    <article className="about__column" 
                        onMouseEnter={() => setHover("looking")} 
                        onMouseLeave={() => setHover("")}>
                        <h4>What I'm looking for</h4>
                        {hoverOn === "looking" &&
                            <div>
                                <p>...in a work environment: </p>
                                <br></br>
                                <ul>
                                    <li>Collaborative atmosphere</li>
                                    <li>Autonomy and trust</li>
                                    <li>Appreciates my playful enthusiasm</li>
                                    <li>Loves my creative/innovative ideas</li>
                                    <li>Conducive to skills improvement</li>
                                    <li>Clear communication</li>
                                    <li>Mentorship</li>
                                </ul>
                            </div>
                        }
                    </article>

                    <article className="about__column" 
                        onMouseEnter={() => setHover("personality")} 
                        onMouseLeave={() => setHover("")}>
                        <h4>Personality Traits: </h4>
                        {hoverOn === "personality" && 
                            <div>   
                                <br></br>
                                <ul>
                                    <li>ENTHUSIASM!</li>
                                    <li>Able to discuss and resolve conflict</li>
                                    <li>Inclusive and team-oriented</li>
                                    <li>Asks questions until confident in what is expected of me</li>
                                    <li>Curious and inquisitive</li>
                                    <li>Takes responsibility for actions</li>
                                    <li>Empathetic and emotionally intelligent</li>
                                    <li>Accept when I'm wrong</li>
                                    <li>Excellent in written and oral communication</li>
                                    <li>Acknowledges shortcomings and works to improve</li>
                                </ul>
                            </div>
                        }
                    </article>

                </div>
            </div>
        </div>
    );
}

Answer 2

您只是存储一个布尔值来表示 3 个布尔值标志。最直接的解决方法是存储索引而不是布尔值。然后只需在用户悬停时将状态设置为当前索引，而不是 true，并在用户未悬停任何内容时将其设置为 null。

import React, { useState } from 'react';
import './About.css'

const About = () => {

  const [hoverIndex, setHoverIndex] = useState(null)

  return (
    <div className="about">
        <div className="about__container">
        <h1 className="about__headline">Just Human Things...</h1>
            <div className="about__columns">
                                
                <article 
                    className="about__column" 
                    onMouseEnter={() => setHover(0)} 
                    onMouseLeave={() => setHover(null)}>
                    <h4>History</h4>
                    {hoverIndex === 0 && 
                        <div>
                            <br></br>
                            <ul>
                                <li>B.S. - Pre-Medical Biology</li>
                                <li>A.P. - Ayurvedic Practitioner</li>
                                <li>RYT-500 - Ayurvedic Yoga</li>
                                <li>C.H. - Clinical Herbalist</li>
                                <li>L.D.T. - Lymph Drainage Therapist</li>
                                <li>Nutritionist</li>
                            </ul>
                            <br></br>
                            <p>Flipped my whole career field from health and nutrition into tech, October 2020, without any previous experience in coding, and I've been engrossed ever since! I know I still have a lot to learn, but I'm ready to absorb all I can!</p>
                        </div>
                    }
                </article>

                <article 
                    className="about__column" 
                    onMouseEnter={() => setHover(1)} 
                    onMouseLeave={() => setHover(null)}>
                    <h4>Hobbies</h4>
                    {hoverIndex === 1 && 
                        <div>
                            <br></br>
                            <ul>
                                <li>Being cozy is my favorite emotion</li>
                                <li>House plant care and husbandry</li>
                                <li>18th Century cooking and recipes</li>
                                <li>Building relationship and rapport with Ravens</li>
                                <li>World of Warcraft/Diablo III</li>
                                <li>Marie Kondo-inspired organizing</li>
                                <li>Watercolor and Acrylic painting</li>
                                <li>Connecting with nature through ritual</li>
                            </ul>
                        </div>
                    }
                </article>

                <article className="about__column" 
                    onMouseEnter={() => setHover(2)} 
                    onMouseLeave={() => setHover(null)}>
                    <h4>What I'm looking for</h4>
                    {hoverIndex === 2 &&
                        <div>
                            <p>...in a work environment: </p>
                            <br></br>
                            <ul>
                                <li>Collaborative atmosphere</li>
                                <li>Autonomy and trust</li>
                                <li>Appreciates my playful enthusiasm</li>
                                <li>Loves my creative/innovative ideas</li>
                                <li>Conducive to skills improvement</li>
                                <li>Clear communication</li>
                                <li>Mentorship</li>
                            </ul>
                        </div>
                    }
                </article>

                <article className="about__column" 
                    onMouseEnter={() => setHover(true)} 
                    onMouseLeave={() => setHover(false)}>
                    <h4>Personality Traits: </h4>
                    {inHover && 
                        <div>   
                            <br></br>
                            <ul>
                                <li>ENTHUSIASM!</li>
                                <li>Able to discuss and resolve conflict</li>
                                <li>Inclusive and team-oriented</li>
                                <li>Asks questions until confident in what is expected of me</li>
                                <li>Curious and inquisitive</li>
                                <li>Takes responsibility for actions</li>
                                <li>Empathetic and emotionally intelligent</li>
                                <li>Accept when I'm wrong</li>
                                <li>Excellent in written and oral communication</li>
                                <li>Acknowledges shortcomings and works to improve</li>
                            </ul>
                        </div>
                    }
                </article>

            </div>
        </div>
    </div>
  );
}

export default About;

Answer 3

您需要指定悬停的部分。你可以这样做：

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render() {
    return (
      <About/>
    )
  }
}

const About = () => {

  const [hoveredSection, setHoveredSection] = useState(null);
  const onMouseEnter = (name) => () => setHoveredSection(name)
  const onMouseLeave = () => setHoveredSection(null)

  return (
      <div className="about">
          <div className="about__container">
          <h1 className="about__headline">Just Human Things...</h1>
              <div className="about__columns">
                                  
                  <article 
                      className="about__column" 
                      onMouseEnter={onMouseEnter(1)} 
                      onMouseLeave={onMouseLeave}>
                      <h4>History</h4>
                      {hoveredSection === 1 && 
                          <div>
                              <br></br>
                              <ul>
                                  <li>B.S. - Pre-Medical Biology</li>
                                  <li>A.P. - Ayurvedic Practitioner</li>
                                  <li>RYT-500 - Ayurvedic Yoga</li>
                                  <li>C.H. - Clinical Herbalist</li>
                                  <li>L.D.T. - Lymph Drainage Therapist</li>
                                  <li>Nutritionist</li>
                              </ul>
                              <br></br>
                              <p>Flipped my whole career field from health and nutrition into tech, October 2020, without any previous experience in coding, and I've been engrossed ever since! I know I still have a lot to learn, but I'm ready to absorb all I can!</p>
                          </div>
                      }
                  </article>

                  <article 
                      className="about__column" 
                      onMouseEnter={onMouseEnter(2)} 
                      onMouseLeave={onMouseLeave}>
                      <h4>Hobbies</h4>
                      {hoveredSection === 2 && 
                          <div>
                              <br></br>
                              <ul>
                                  <li>Being cozy is my favorite emotion</li>
                                  <li>House plant care and husbandry</li>
                                  <li>18th Century cooking and recipes</li>
                                  <li>Building relationship and rapport with Ravens</li>
                                  <li>World of Warcraft/Diablo III</li>
                                  <li>Marie Kondo-inspired organizing</li>
                                  <li>Watercolor and Acrylic painting</li>
                                  <li>Connecting with nature through ritual</li>
                              </ul>
                          </div>
                      }
                  </article>

                  <article className="about__column" 
                      onMouseEnter={onMouseEnter(3)} 
                      onMouseLeave={onMouseLeave}>
                      <h4>What I'm looking for</h4>
                      {hoveredSection === 3 &&
                          <div>
                              <p>...in a work environment: </p>
                              <br></br>
                              <ul>
                                  <li>Collaborative atmosphere</li>
                                  <li>Autonomy and trust</li>
                                  <li>Appreciates my playful enthusiasm</li>
                                  <li>Loves my creative/innovative ideas</li>
                                  <li>Conducive to skills improvement</li>
                                  <li>Clear communication</li>
                                  <li>Mentorship</li>
                              </ul>
                          </div>
                      }
                  </article>

                  <article className="about__column" 
                      onMouseEnter={onMouseEnter(4)} 
                      onMouseLeave={onMouseLeave}>
                      <h4>Personality Traits: </h4>
                      {hoveredSection === 4 && 
                          <div>   
                              <br></br>
                              <ul>
                                  <li>ENTHUSIASM!</li>
                                  <li>Able to discuss and resolve conflict</li>
                                  <li>Inclusive and team-oriented</li>
                                  <li>Asks questions until confident in what is expected of me</li>
                                  <li>Curious and inquisitive</li>
                                  <li>Takes responsibility for actions</li>
                                  <li>Empathetic and emotionally intelligent</li>
                                  <li>Accept when I'm wrong</li>
                                  <li>Excellent in written and oral communication</li>
                                  <li>Acknowledges shortcomings and works to improve</li>
                              </ul>
                          </div>
                      }
                  </article>

              </div>
          </div>
      </div>
  );
}


ReactDOM.render(
  <App />,
  document.getElementById('container')
);