CODEWITHSUNDEEP
htmlcss
kayjay
kayjay

Reputation: 1

CSS hover flickers

What I want is relatively simple - when you hover over the image, I want its margin-left to change to -400px; which it does. However when you move your mouse over the div 'under' the image, it causes the image to flicker back and forth between the hover margin and its resting margin.

Is there a way to stop that from happening (without redoing all of that code)?

Code.

The class names in question are #fsmhover and #fsmscroll2:

.fbgsm {
  float: left;
  margin-top: 10px;
  margin-left: -120px;
  height: 130px;
  width: 400px;
  background-color: #fff;
  display: inline-block;
  overflow: hidden;
}
#fsmhover {
  background-image: url('http://i.imgur.com/3mnetFt.png');
  width: 400px;
  height: 130px;
  position: relative;
  top: 0px;
  z-index: 3;
  transition: 0.4s ease-in-out;
}
#fsmhover:hover {
  margin-left: -400px;
}
#fsmscroll2 {
  background-color: #fff;
  margin: -120px 0px 0px 100px;
  width: 250px;
  height: 100px;
  padding: 5px 10px;
  border-left: 1px solid #000;
  overflow: auto;
  font-size: 11px;
  font-family: arial;
  text-align: justify;
  line-height: 120%;
}
#fsmscroll2:hover + #fsmhover {
  margin-left: -400px;
}
#fsmscroll2::-webkit-scrollbar {
  width: 2px;
}
#fsmscroll2::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.2);
}
#fsmscroll2::-webkit-scrollbar-thumb {
  background-color: #000;
}
<div id="fsmhover"></div>
<div id="fsmscroll2">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus enim metus, bibendum in arcu et, blandit fringilla sapien. Integer a sollicitudin justo. Vestibulum finibus suscipit bibendum. Nam in ultricies magna, egestas commodo enim.
  <p />Nam vulputate enim at augue suscipit, non tempus massa tristique.
</div>

Upvotes: 0

Views: 1370

Answers (2)

Sami Kuhmonen
Sami Kuhmonen

Reputation: 31153

Since the element is scrolled away, it's no longer hovering, so it is moved back and becomes hovering and is moved away and...

Simplest way to fix it is to set padding-right: 400px; background-repeat: no-repeat; to the #fsmhover. That way the background image is not repeated to the padding and the padding on the right makes sure the element doesn't get moved away.

Upvotes: 0

Itay
Itay

Reputation: 16777

You should use the :hover pseudo class on their shared container (let's say the div with the fbgsm class) instead of on the text element itself:

Working example

So write this:

.fbgsm:hover #fsmhover {
  margin-left: -400px;
}

Instead of this:

#fsmhover:hover {
  margin-left: -400px;
}

#fsmscroll2:hover + #fsmhover {
  margin-left: -400px;
}

Upvotes: 1

Related Questions