How can I make an element become visible by hovering over another element?

Question

I am trying to make an element only appear when another element is "hovered".

The code is as follows:

#form-field-numerocnh.elementor-field-textual {
      background-image: url("http://3.87.64.242/wp-content/uploads/2021/12/arrow-drop-down.png");
      background-repeat: no-repeat;
    background-color: #ffffff;
    border-width: 2px 2px 2px 2px;
    border-radius: 8px 8px 8px 8px;
  background-size: 20px;
  background-position: 95%;
}

.imagem-ajuda {
    display:none;
}

.elementor-field-textual:hover + .imagem-ajuda {
    display:block !important;
}

The code itself works, even the

.imagem-ajuda {
    display:none;
}

Now, the part that was supposed to make the element appear again doesn't work, which is:

.elementor-field-textual:hover + .imagem-ajuda {
    display:block !important;
}

I already tried with:

#form-field-numerocnh.elementor-field-textual:hover + .imagem-ajuda {
    display:block !important;
}

But doesn't work :(

Welcome. Please see [ask], then revise to show some HTML along with your CSS in a snippet demo. — isherwood, Dec 10 '21 at 15:29
why don't you use jquery hover method...and inside the callback make the elementin question appear — Dimitris Papageorgiou, Dec 10 '21 at 15:32
@Dimitris Papageorgiou: Why would one implement jquery for a simple hover? — Lain, Dec 10 '21 at 15:45
@DimitrisPapageorgiou You should not use jquery. It's deprecated. — Lars Flieger, Dec 10 '21 at 15:47
Does this answer your question? [How to affect other elements when one element is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered) — Lars Flieger, Dec 10 '21 at 15:47
Any answer to this question without seeing your HTML structure is just a guess. Please put the relevant HTML into your question. — A Haworth, Dec 10 '21 at 19:10

How can I make an element become visible by hovering over another element?

0 Answers0