CODEWITHSUNDEEP
jqueryhtmljquery-hover
Bryan
Bryan

Reputation: 358

How to create a hover effect over two separate object?

I have two div's, A and B. I would like to hover over DIV A and reveal DIV B, but I do not want DIV B to hide until the mouse moves from over DIV B.

<div id="a"><img src="images...." class="profile" id="options" /></div>
<div id="b"> //some information</div>

The jquery:

<script>
$(document).ready(function(){
$('#a').hover(function(){
$('#b').show();
},
function(){
$('#b').hide();
});
});

My CSS:

<style type="text/css">
<!--
.profile{ position: absolute; top: 0px; width: 20px; height: 20px;}
#id{ position: absolute; top: 20px; width: 300px; height: 400px;}
-->
</style>

I provided the css for explanation purpose. I was thinking of changing the class so that but DIV A and DIV B have the same class. This was not possible because my DIV B will become the size of a chatting image.

below is an image of what I am trying to describe:

I want to hover over DIV A and reveal DIV B, DIV B should only be hidden when the mouse move from over both DIV A and DIV B

can someone please explain where I am going wrong with my codes?

Upvotes: 1

Views: 640

Answers (4)

Leeish
Leeish

Reputation: 5213

EDIT You can do the entire thing with CSS. See the updated JSFiddle link: JSFiddle Example

#a,#b {
width: 200px;
height: 200px;
background: red;
}
#b {
background: blue;
display: none;
}
#a:hover + #b {
display: block;
}
#b:hover {
display: block;
}

Upvotes: 1

antejan
antejan

Reputation: 2624

As I understand you want to show B when cursor on A OR B and hide B when cursor leaves A AND B.

$("#a, #b").hover(
    function(){$("#b").show();},
    function(){$("#b").hide();}
);

Fiddle: http://jsfiddle.net/7akEc/

Also probably you can put B inside A and show/hide it with just css

#a:hover #b {
    display:block;
}

Upvotes: 1

Ben_hawk
Ben_hawk

Reputation: 2486

I am not quite sure what you are trying to do?, Are you trying to show div #b when you h

    (function(){

      $('#a').hover(function(){
       $('#b').show();
      }

      $('#b').mouseleave(function(){
       $(this).hide();
      }

    })()

and in your css

#b {
  opacity: 0;
}

Upvotes: 0

Mihai Matei
Mihai Matei

Reputation: 24276

Try this:

$(document).ready(function(){

  $('#a').mouseenter(function(){
    $('#b').show();
  });

  $('#b').mouseleave(function(){
    $(this).hide();
  });

});

Upvotes: 7

Related Questions