JavaScript's onmouseover and onmouseout events causing blinking

Question

I have problem with JavaScript, onmouseover and onmouseout events. When mouse comes to bottom edge of desired element, mouseover and mouseout effects start blinking. Here is example:

function menuHover(field)
{
     var img = field.nextElementSibling;
     var height = img.height;
     var bottom = 0 - Math.floor(height / 2);
     bottom += 'px';
     img.style.display = 'block';
     img.style.bottom = bottom;
}

function menuHoverOut(field)
{
    var img = field.nextElementSibling;
    img.style.display = 'none';
}

DEMO: https://jsfiddle.net/index23/ety2z0zu/9/

Is there solution for this?

this issue seems to be already answered in http://stackoverflow.com/questions/18464370/jquery-mouseover-and-mouseout-keeps-flashing — Sumit Surana, Apr 16 '15 at 09:19
Thanks. But same problem with onmouseenter and onmouseleave. — poletn23, Apr 16 '15 at 11:28

Pugazh · Accepted Answer · 2015-04-16T09:53:46.313

CSS would be the recommendation. But here is the answer for your question https://jsfiddle.net/ety2z0zu/11/. Please remove img.style.bottom = bottom; from your JavaScript

function menuHover(field) {
  var img = field.nextElementSibling;
  var height = img.height;
  var bottom = 0 - Math.floor(height / 2);
  bottom += 'px';
  img.style.display = 'block';
  // console.log(height);
}

function menuHoverOut(field) {
  var img = field.nextElementSibling;
  img.style.display = 'none';
}

a,
a:link {
  color: inherit;
  text-decoration: none;
}
body {
  background-color: #2a4b8b;
}
header nav {
  text-align: center;
  position: relative;
}
.main-nav {
  margin: 0 auto;
  padding-right: 25px;
  list-style: none;
  display: inline-block;
}
.main-nav li {
  float: left;
  margin-right: 23px;
  display: block;
  padding-top: 50px;
  -webkit-box-shadow: 0 4px 8px rgba(2, 3, 2, .39);
  -moz-box-shadow: 0 4px 8px rgba(2, 3, 2, .39);
  box-shadow: 0 4px 8px rgba(2, 3, 2, .39);
  position: relative;
}
.main-nav li a {
  display: block;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 3px;
  border-bottom: 5px solid #6173ad;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.hover-img {
  display: none;
  position: absolute;
  left: 0px;
  width: 100%;
  height: auto;
}

<header>
  <nav>
    <ul class='main-nav'>
      <li>
        <a href='#' onmouseover='menuHover(this);' onmouseout='menuHoverOut(this);'>LINK</a>
        <img alt='' class='hover-img' src='https://dl.dropboxusercontent.com/u/32550463/menu-hover.png' />
      </li>
      <li>
        <a href='#' onmouseover='menuHover(this);' onmouseout='menuHoverOut(this);'>LINK</a>
        <img alt='' class='hover-img' src='https://dl.dropboxusercontent.com/u/32550463/menu-hover.png' />
      </li>
    </ul>
  </nav>
</header>

Refreshing that you found the actual code problem, rather than "why not use css?" (however valid that question may be) — Mackan, Apr 16 '15 at 09:24
Yes, I Agree. CSS would be the better option. But it's up to the user to decide. — Pugazh, Apr 16 '15 at 09:32
Thanks for answers. I don't use CSS because i want hover effect on a tag (not li tag). And I need to display image at bottom and over all other elements (a and li). Other problem is that image is not same size for different size of menus, so I need to scale and position hover image for every menu item separately. I think that it is not possible with CSS. — poletn23, Apr 16 '15 at 11:24

score 0 · Answer 2 · answered Apr 16 '15 at 09:17

0

Try to rewrite your code to use css possibilities of mouse tracking.

For mouse - use style :hover
To show image under element - use css directive content with after

Look at this Demo

answered Apr 16 '15 at 09:17

Olexandr Petrov

134
1
4

score 0 · Answer 3 · answered Apr 16 '15 at 09:19

0

Why not simply use css?

By using the :hover pseudo class on the parent LI element, you can control the visibility of the image, like so:

.main-nav li img.hover-img {
    display: none;
}

.main-nav li:hover img.hover-img {
    display: inline;
}

See it in action:

https://jsfiddle.net/vugjp340/1/

And maybe it would be nicer with an opacity transition.

answered Apr 16 '15 at 09:19

Davy

6,295
5
27
38

Thanks for answers. LI elements is too big for hover effect. I have to use hover effect on A element. I don't use CSS because i want hover effect on a tag (not li tag). And I need to display image at bottom and over all other elements (a and li). Other problem is that image is not same size for different size of menus, so I need to scale and position hover image for every menu item separately. I think that it is not possible with CSS. – poletn23 Apr 16 '15 at 11:34

score 0 · Answer 4 · answered Apr 16 '15 at 09:20

Why are you doing that effect in javascript and not just with css?

Three little changes here: 1. remove padding-top from .main-nav li 2. add padding-top from .main-nav li a 3. add:

.main-nav li:hover img.hover-img {
    display:block;
}

Now everything is almost the same except you can click on the "entire" button which has now more height like it is visible. https://jsfiddle.net/ety2z0zu/16/

score 0 · Answer 5 · answered Apr 16 '15 at 11:33

I think I have found out what is a problem. Problem could be in image that appears on mouse over. When image appear it come over a tag, and browser fire mouse out events, then image hide and browser fire mouse over event and so on in the loop.

Thank you all for helping.

JavaScript's onmouseover and onmouseout events causing blinking

5 Answers5