jquery .mouseover() появляется элемент mouseout()

Я пытаюсь заставить элемент скрыть себя при наведении мыши, к сожалению, он продолжает появляться, если мышь какое-то время зависает на элементе.

Любая идея, что я делаю неправильно?

Мне нужно, чтобы это оставалось скрытым, когда мышь находится над элементом, и появлялось только тогда, когда мышь отсутствует.

$('#test').mouseover(function() {
  $('#test').hide();
});

$('#test').mouseout(function() {
  $('#test').fadeIn(500);
});
#test {
  width: 100px;
  height: 100px;
  background: blue;
  position: absolute;
  top: 10px;
  left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="test"></div>

демонстрация jsfiddle


jquery mouseover mouseout
person Pat    schedule 04.04.2015    source источник
comment
Здорово, что вы добавили минимальный тестовый пример с использованием jsfiddle. Но вы всегда должны включать соответствующий код в сам вопрос. Вопросы и ответы здесь не должны зависеть от внешнего источника.   -  person t.niese    schedule 04.04.2015

Ответы (3)


arrow_upward
0
arrow_downward

Причина в том, что скрытие элемента запускает его функцию выхода из мыши, потому что он покидает сам элемент, исчезая.

Вы можете добавить элемент упаковки, например,

<div id="demo">
    <div id="test"></div>
</div>

и прикрепить к нему обработчики событий.

Код:

$('#demo').mouseover(function () {
    $('#test').hide();
});
$('#demo').mouseout(function () {
    $('#test').fadeIn(500);
});

Демонстрация: http://jsfiddle.net/04wL1rb9/15/

person Irvin Dominin    schedule 04.04.2015

arrow_upward
1
arrow_downward

Интересно, что происходит с вашим кодом, насколько я знаю, он должен работать. Вы пробовали просто использовать CSS?

    #test {
    width:100px;
    height:100px;
    background-color: blue;
    position: absolute;
    top: 10px;
    left: 10px;
    /* HOVER OFF */
    -webkit-transition: background-color 2s;
}
#test:hover {
    background-color: transparent;
    /* HOVER ON */
    -webkit-transition: background-color 2s;
}

Вы можете изменить время перехода. И не забудьте отключить код jQuery, который вы указали в своем вопросе. Так же, как я сделал это с фоном, вы можете использовать «отображение». Надеюсь, это поможет.

Скрипка

person cubanGuy    schedule 04.04.2015

arrow_upward
1
arrow_downward

Используйте контейнер div, чтобы решить эту проблему. Причина: Когда div исчезает, запускается событие mouseout.

$('#container').mouseenter( function(){
		
       $('#test').fadeOut();
    console.log("enter");
	});
$('#container').mouseleave( function (){
        $('#test').fadeIn();
    console.log("leave");
});
#test {
	    width:100px;
	    height:100px;
	    background: blue;
	    
	}

#container{
       width:100px;
	    height:100px;
    position: absolute;
	    top: 10px;
	    left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<div id="test"></div>
</div>

person tkay    schedule 04.04.2015