How do I move the mouse over a particular div when another element appears?

Asked

Viewed 2,545 times

0

My goal is to have an invisible div, and when you mouse over that invisible div, make another div appear?

example:

<div class="invisivel"></div>
<div class=visivel">
  Olá
</div>
jquery css

  • If you have a invisible div how does the user know it’s on top of it? Do you mean you have 2 invisible Ivs? Explain better to be clearer.

  • This, initially both will be invisible, but when you mouse in div 1, will be visible to div 2

  • But can you explain more about HTML and how/where you want to use it? Knowing more about the problem leads to the right solution.

  • Isa: the solution that best solves your problem is you who knows best. I saw that you accepted an answer. But since you didn’t describe the problem, you have fewer answers and possibly inadequate answers to your case. If your case is HTML as indicated best then use only CSS. No Javascript.

1 answer

3


I think description of your problem is wrong.

Anyway, just use the method show() of jQuery within an event of mouseOver.

$('.visivel').on('mouseover', function() {
  $('.invisivel').show();
});

$('.visivel').on('mouseout', function() {
  $('.invisivel').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="visivel">
  Olá
</div>

<div class="invisivel" style="display:none">
  Invisivel
</div>

  • You can adapt this example so when I take the mouse off the top disappear again?

  • Yes, @Isa. View edit.

  • According to comments on the question "initially both will be invisible"... let’s wait for more information/description.

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.