0

I use reactjs framework. I want to when hovering the mouse over one of the elements, change the style of another element.

I try with these codes but nothing changed:

My component:

<div className={styles.container_search}>
       <form action="" className={styles.form_search}>
           <input className={styles.input_search} required={true} type={"search"} placeholder="search" />
           <i className={`${styles.icon_search} bi bi-search`}></i>
       </form>
</div>

my module CSS file:

.container_search {
  --border-radius: 15px;
}

.form_search {
  display: flex;
  align-items: center;
  background: #ECEFF1;
  transition: all 1s;
}

.input_search {
  background-color: transparent;
  color: #000;
  outline: 0;
  border: 0;
}

.icon_search {
  color: #000;
  font-size: 1.2rem;
  transition: all 1s;
}

.icon_search:hover {
  cursor: pointer;
}

.icon_search:hover .input_search {
  color: #FE8D55;
}

Can you help me?

Marlen Schreiner
  • 726
  • 10
  • 25
  • why not just put the hover on the form or wrap the icon and input in an element and put the hover on that - eg `.parent:hover .icon_search`. Also why do you only change the cursor to pointer on hover - it will only change to a hand when you hover anyway so you may as well start it with that style – Pete Aug 08 '22 at 13:00
  • 1
    Does this answer your question? https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered –  Aug 08 '22 at 13:02

1 Answers1

0

icon_search and input_search are actually siblings so your css would not work this way. And since input_search is previous sibling so you can't find it at all using just CSS while you hover on a sibling that renders after it. Either do it with JS or change your use case a little bit if you can. For example, change color of child when hovered over a parent or hovered over a previous sibling.

Abhishek Mittal
  • 187
  • 12