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

Question

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:

.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;
}

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?

Answer 1

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.

Answer 2

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");
)})