Наведение и переключение в jQuery

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

<div id="background">
    <div id="blue"></div>
    <div id="red"></div>
    <div id="transparent"></div>
</div>​

CSS:

#red{
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:red;
    cursor: pointer;
    z-index: 1; 
    }

#blue{
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:blue;
    cursor: pointer; 
    }

#transparent {
    position:absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 30px;
    background-color:none;
    cursor: pointer; 
    z-index: 2; 
    }

#background{
    position: relative;
    margin: 0 auto;
    width:300px;
    height: 300px;
    border: 1px solid;
    border-color:#CCC;
    text-align: center;
    cursor: pointer; 
}
​

Затем используйте наведение (функция (), функция ()). Не забудьте остановить там выполнение событийных функций:

$(function(){      
    $("#transparent").hover(function() {
        $("#red").stop().fadeOut();
    }, function() {
       $("#red").fadeIn("normal");
    });

})​

http://jsfiddle.net/DpD8S/14/

Ваша проблема, вероятно, заключается в определении hover.

hover( handlerIn(eventObject) , handlerOut(eventObject)  )
hover( handlerInOut(eventObject)  )

Это означает, что когда вы передаете только одну функцию, она вызывается для mouseenter, а также mouseleave. Вы должны либо использовать эти события, либо передать две функции в hover

Кроме того, это в значительной степени «назад». Скрыть что-то при входе всегда будет проблемой. Вот почему я теперь переименовываю ваши div. Вы должны показывать #active при вводе #inactive и скрывать #active при выходе из #active.

Вот скрипт http://jsfiddle.net/MwQaf/1/

Возможно, вы бы предпочли изменить: $("#background").hover(...) на $("#blue").mouseleave(...)

http://jsfiddle.net/DpD8S/18/

#background div оборачивает два других. Ваша функция $('#background').hover() вызывается всякий раз, когда событие hover происходит в #background, даже в его дочерних элементах.

Я считаю, что вы можете достичь желаемого, сделав следующее:

$("#red").mouseenter(function() {
    $(this).fadeOut();
});

$("#red, #blue").mouseleave(function() {
    $("#red").fadeIn("normal");
}); 

Это, однако, приводит к странному поведению, поскольку две анимации «затухания» ставятся в очередь. Если пользователь быстро входит и выходит, div кажется невосприимчивым и анимируется странным образом.

Если установка плагинов возможна, вы можете попробовать этот плагин для анимации цветов. . Это позволит вам даже уменьшить количество элементов до самого div. Вы также сможете сократить использование CSS и использовать более чистый JavaScript. Проверьте скрипт.

Функция наведения обычно определяется следующим образом:

$('#red').hover(function() {
    $(this).fadeOut();
}, function() {
    $(this).fadeIn();
});

Первая функция — это часть mouseenter .hover(). Вторая функция — часть зависания мыши. В вашем случае фоновый div не имеет значения для проблемы.