Форум

vuchastyi · #1 (**permalink**) 25.04.2015, 02:41

Не могу понять что не правильно... всё по примеру вроде делал...

<script>
$( "#start" ).hover(  
	$("#desof_pan").show(),   
	$("#desof_pan").hide(); );
</script>

Hover не работает

laimas · #2 (**permalink**) 25.04.2015, 06:33

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    $('#foo').hover(
        function(){
            $(this).text('Курсор на объекте')
        },
        function(){
            $(this).text('Курсор вне объекта');
    });
});
</script>     
</head> 
<body>
<div id="foo">Наведи мышку и получи фишку!</div>
</body> 
</html>

vuchastyi · #3 (**permalink**) 25.04.2015, 16:25

laimas,
мне нужно чтобы при наведении на #start появлялся #desof_pan и при отведении исчезал
Поможешь?
AAAAA? всё разобрался

<script> 
$(function() {
    $('#aa').hover(
        function(){
            $("#dd").show()
        },
        function(){
            $("#dd").hide();
    });
});
</script>

Маууупа · #4 (**permalink**) 25.04.2015, 16:27

vuchastyi,
Попробуй быстро поводить по ссылке туда-суда теперь.

vuchastyi · #5 (**permalink**) 25.04.2015, 16:59

Маууупа,
должны быть какие-то недостатки... я понял..
Объясни как лучше сделать...

laimas · #6 (**permalink**) 25.04.2015, 17:39

Для скрыть/показать лучше не использовать метод .hover(), лучше использовать .mouseenter() и .mouseleave().

vuchastyi · #7 (**permalink**) 25.04.2015, 22:31

laimas,
и что изменяется?

рони · #8 (**permalink**) 25.04.2015, 23:01

vuchastyi,

Сообщение от laimas

.mouseenter() и .mouseleave().

надёжнее если внутри $('#aa') есть другие элементы

laimas · #9 (**permalink**) 25.04.2015, 23:08

Ну по сути самой ничего, если иметь ввиду сами события (hover и связывает два этих события вместе). Но когда дело касается визуализации, мало указать только эффект, бывает необходимо запустить ее по событию у текущего элемента и здесь же прекратить у других.

А то что вы хотите сделать, так это проще посредством CSS описать.

рони · #10 (**permalink**) 25.04.2015, 23:26

vuchastyi,

<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<style>
#aa{
   height: 26px;
   background-color: #FF00FF;
    cursor: default;
}
#dd{
   height: 100px;
   background-color: RoyalBlue;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
    var $a = $('#aa'), $d = $('#dd');
    $a.mouseenter(
        function(){
            $d.stop(true,true).delay(500).animate({height : 'show'});
        }).mouseleave(  function(){
            $d.stop(true,true).delay(500).animate({height : 'hide'});
    })
   $d.hide();
});
</script>
</head>
<body>
<div id="aa">Наведи мышку и получи фишку!</div>
<div id="dd">test</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript