How to change style element on hover another element in css?-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

you can use JQuery for obtain this goal. The example code is providing,

Syntax,

$('#element_selector).hover(function(){
   $('#second_element_selector').css("property","value");
)})

Example,

$('div').hover(function(){
   $('p').css("background-color","green");
)})