CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-hover
GJain
GJain

Reputation: 5093

hover on overlap divs with unequal width

I have following code in a Fiddle.

I am trying to alternate between two pieces of text in the div in the top right corner. When I hover on the div and move up and down, the text alternates as expected. On hover, the current text hides and the hidden text appears. On hover out, the same thing happens.

But When I hover on it and move left, the current text does not disappear and the hidden text does not appear (which was the expected behavior).

What I found, its a problem of unequal width of texts. If I set the width to 100px, then it works.

I don't want to set the width because the text in that div will be of variable length.

What is happening and how can i fix it without setting the width to a fixed number?

HTML:

<div class="topBar">
    <div class="item2" id = "i1">
       0123456789
    </div>
    <a class="item2" id = "i2" href="#">
       9876
    </a>
</div>

CSS:

.topBar {
  position: fixed;
  width: 100%;
  height:50px;
  top: 0;
  min-width:480px;
  border:1px solid red;
  z-index:1000;
}


.item2 {
  position:absolute;
  right:0;
  border-left: 1px solid black;
  border-right: 1px solid black;
  height:50px;
}

#i2 {
    display:none;
}

JavaScript

$("#i1").hover(
    function() {
      $(this).hide();
      $("#i2").show()
    },
    function() {
    }
);

$("#i2").hover(
    function() {
    },
    function() {
      $(this).hide();
      $("#i1").show()
    }
);

EDIT:

I hacked it by doing and it works 

$("#i2").width($(this).width());

But I would still want to know the correct answer.

Upvotes: 1

Views: 164

Answers (1)

ScottS
ScottS

Reputation: 72261

Here's what is happening

As you move left, the $("#i2").hover is triggering, but because the #i1 is wider, you are immediately "hovering" over it and it is re-triggering the $("#i1").hover, which is what keeps the #i2 showing. Of course, now you are not hovering over the #i2, so you must reenter it and then move out top or bottom to trigger its exit without re-triggering the #i1 function.

I cannot think of any more elegant way of handling the situation than having the widths be equal (whether set by CSS or by javascript).

Upvotes: 1

Related Questions