JavaScript onmouseover и события onmouseout, вызывающие мигание

Question

У меня проблема с JavaScript, onmouseover и onmouseout событий. Когда мышь приближается к нижнему краю нужного элемента, эффекты mouseover и mouseout начинают мигать. Вот пример:

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/

Есть ли решение для этого?

Answer 1

CSS будет рекомендация. Но вот ответ на ваш вопрос https://jsfiddle.net/ety2z0zu/11/. Пожалуйста, удалите img.style.bottom = bottom; из вашего 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>

Answer 2

Попробуйте переписать код, чтобы использовать возможности CSS отслеживания мыши.

1. Для мыши - использовать стиль :hover
2. Чтобы показать изображение под элемент - использование CSS директивы content с after

Посмотрите на эту Demo

Answer 3

Почему бы не просто использовать CSS?

При использовании: наведите псевдо-класс на тему родительского элемента LI, вы можете контролировать видимость изображения, например, так:

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

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

в действии:

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

И, возможно, было бы лучше с переходом непрозрачности.

Answer 4

Почему вы делаете этот эффект в javascript, а не только с помощью css?

Три небольшие изменения здесь: 1. Удалите padding-top из .main-nav li 2. добавить padding-top из .main-nav li a 3. дополню:

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

Теперь все почти так же, за исключением того, вы можете нажать на «весь» которая теперь имеет большую высоту, как видно. https://jsfiddle.net/ety2z0zu/16/

Answer 5

Я думаю, что выяснил, в чем проблема. Проблема может быть в изображении, который появляется при наведении мыши. Когда изображение появляется, оно появляется поверх тега, а браузер отключает события, затем скрывает изображение, а браузер пропускает курсор мыши над событием и т. Д. В цикле.

Спасибо, что помогли.