CODEWITHSUNDEEP
javascripthtmlcssreactjs
Arjun Sah
Arjun Sah

Reputation: 77

Want to target only one div at a time, the div which is hovered but not the other sibling div in ReactJS?

I am having a unique scenario but I am unable to understand this.

When I hover on one DIV then it selects both the sibling DIVS. I do not want this behaviour.

I want to select only the DIV which is being hovered.

How can I achieve this in ReactJS ?. The working code is shown below.

App.js

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

const App = () => {
    const [hover, setHover] = useState(false);

    const texts = ["Arjun", "Andy"];
    let cclass = hover ? "item itemHover":"item";
    return (
        <div className="wrapper">
            {
                texts.map((t, i) => (
                    <div className={cclass} key={i} onMouseEnter={() => setHover(true)}
                         onMouseLeave={() => setHover(false)}>
                        {t}
                    </div>
                ))
            }
        </div>
    )
}
export default App;

App.css

.wrapper{
  width: 60%;
  margin: 10rem auto;
  border: 1px solid;
  display: flex;
}

.item{
  width: 50%;
  border: 1px solid grey;
  height: auto;
  padding: 2rem 3rem;
}

.itemHover{
  background: grey;
}

Upvotes: 0

Views: 57

Answers (2)

John
John

Reputation: 5335

Can you do it with CSS? It's very simple with CSS. Just add this:

.item:hover{
  background: grey;
}

Upvotes: 0

Ilyas
Ilyas

Reputation: 94

The hover state in App is common for both divs. To make it work you need to have hover state for each div separate. For this, create a new component TextDiv

import React, {useState} from "react";
import "./styles.css";

export default function TextDiv({t}) {
  const [hover, setHover] = useState(false);

    let cclass = hover ? "item itemHover":"item";
    return (
      <div className={cclass} onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}>
          {t}
      </div>
    )
}

and change App.js file

import React, {useState} from "react";
import TextDiv from './TextDiv'
import "./styles.css";

export default function App() {
    const texts = ["Arjun", "Andy"];
    return (
        <div className="wrapper">
            {
              texts.map((t, i) => (
                <TextDiv t={t} key={i}/>
              ))
            }
        </div>
    )
}

Upvotes: 1

Related Questions