jQuery addClass and removeClass event has weird effect on hover function

Question

I'm trying to create a list of menu that when you hover on each it will show the other content. It is now working though yet every time you hover on each item it will create a space on the other list item.

Here's the sample code.

<ul class="test111">
    <li><span class="testCont">Another</span><a href="#" class="testmenu">Menu 1</a></li>
    <li><span class="testCont">Another1</span><a href="#" class="testmenu">Menu 2</a></li>
</ul>

CSS

.test111{
    position: fixed;
    right:0;
    margin-right:0;
}
.test111 li{
    margin-bottom: 10px;
    list-style: none;
    height:36px;
    display: block;
}
.test111 li .testCont{
    background:#0f0;
    width:100px;
    float:left;
    height: 100%;
}
.test111 li a{
    background:#0ff;
    width:50px;
    float:left;
    height: 100%;
}

JS

$('.testCont').hide();

$('.test111 li').mouseover(function(){

    $('.test111 li').removeClass('hoverME');
    $(this).addClass('hoverME');
    $('.hoverME .testCont').show();

});
$('.test111 li').mouseout(function(){
    $('.testCont').hide();
});

SAmple output here

Thank you so much

Mohamed-Yousef · Accepted Answer · 2018-01-17 03:53:50Z

2

Just add float:right; to .test111 li a

$('.testCont').hide();

$('.test111 li').mouseover(function(){

    $('.test111 li').removeClass('hoverME');
    $(this).addClass('hoverME');
    $('.hoverME .testCont').show();

});
$('.test111 li').mouseout(function(){
    $('.testCont').hide();
});

.test111{position: fixed; right:0; margin-right:0;}
.test111 li{margin-bottom: 10px; list-style: none; height:36px; display: block;}
.test111 li .testCont{background:#0f0; width:100px; float:left; height: 100%;}
.test111 li a{background:#0ff; width:50px; float:left; height: 100%;float:right;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="test111">
    <li><span class="testCont">Another</span><a href="#" class="testmenu">Menu 1</a></li>
    <li><span class="testCont">Another1</span><a href="#" class="testmenu">Menu 2</a></li>
</ul>

answered Jan 17, 2018 at 3:53

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohamed-Yousef Over a year ago

You're Welcome @justch4 .. Have a great day :-)

nazim · Accepted Answer · 2018-01-17 03:53:55Z

0

I don't know if this is what you need. But I am guessing here. Change the last line in CSS:

.test111 li a{background:#0ff; width:50px; float:right; height: 100%;}

answered Jan 17, 2018 at 3:53

nazim

1,5792 gold badges16 silver badges27 bronze badges

Comments

Utsav Preet · Accepted Answer · 2018-01-17 03:58:35Z

0

Just change the css position property of test111 to relative. It should fix the problem

answered Jan 17, 2018 at 3:58

Utsav Preet

2583 silver badges9 bronze badges

Comments

Louys Patrice Bessette · Accepted Answer · 2018-01-17 04:00:44Z

Here is a smooth variant using CSS opacity and jQuery .animate().

$(document).ready(function(){

  //$('.testCont').hide();

  $('.test111 li').mouseover(function(){


    $('.test111 li').removeClass('hoverME');
    $(this).addClass('hoverME');
    $('.hoverME .testCont').stop().animate({"opacity":1},600);


  });
  $('.test111 li').mouseout(function(){
    $('.testCont').stop().animate({"opacity":0},600);;
  });

});

.test111{
  position: fixed; 
  right:0; 
  margin-right:0;
}
.test111 li{
  margin-bottom: 10px; 
  list-style: none; 
  height:36px; 
  display: block;
}
.test111 li .testCont{
  background:#0f0; 
  width:100px; 
  float:left; 
  height: 100%;
}
.test111 li a{
  background:#0ff; 
  width:50px; 
  float:left; 
  height: 100%;
}
.testCont{
  opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="test111">
  <li><span class="testCont">Another</span><a href="#" class="testmenu">Menu 1</a></li>
  <li><span class="testCont">Another1</span><a href="#" class="testmenu">Menu 2</a></li>
  <li><span class="testCont">Another1</span><a href="#" class="testmenu">Menu 3</a></li>
</ul>

Collectives™ on Stack Overflow

jQuery addClass and removeClass event has weird effect on hover function

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related