How do I display a DIV by passing the mouse over another DIV while maintaining the same open position?

Question

How do I display a DIV by passing the mouse over another DIV while maintaining the same open position?

Navigation

#1 by (1 votes)

0

I will explain based on the image below that I did to make it easier to understand.

In the image below I have a banner (gray color) and a bigger one in red.

The operation would be as follows: When you hover your mouse over the gray colored banner, it would open the red banner. But, the red banner would always open in the same coordinate (position) regardless of the size of the gray banner, as you can see below.

I hope you can help me.

Thank you!

css

asked by anonymous 11.05.2016 / 14:30

1 answer

Modify code to avoid an XMLHttpRequest with $ .getJSON Doubts with business rule between class student and class

score 1 · Answer 1

You can use position:fixed; to keep an element always in the same position on the screen. Here's an example, mouse over the gray area to display the red banner. I hope I have helped: D

$("document").ready(function (){
  $(".cinza").mouseenter(function (){
     $(".vermelho").show();
  })
  
  $(".cinza").mouseleave(function (){
     $(".vermelho").hide();
  })
})

.container{
  display:block;
}

.cinza{
  width:100%;
  height:50px;
  background:gray;
}

.vermelho{
  position:fixed;
  top:0;
  left:50%;
  width:100px;
   height:100px;
  background:red;
  display:none;
  transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container">
  <div class="cinza"></div>
  <div class="vermelho"></div>
</div>