Как сместить div, зависая над другим div с jquery?

Question

У меня есть код здесь и не могу узнать, как сделать эту работу, потому что я по-прежнему новичок в javascript и jquery. У меня будет демо внизу, чтобы вы могли видеть, что у меня происходит. В демо находится div, размещенный left:-60px, поэтому он скрыт, этот div также имеет класс 'show', который позиционирует div на left:0 Существует также длинный черный ящик, который является еще одним div. Я хочу сделать это, когда вы наведете курсор на длинный черный ящик, он активирует свойство show для другого div. Вот мой код:

var $showSidemenu = $('#sidemenu'); 
 
var $sidemenuShowButton = $('#sidemenuShowButton'); 
 

 
function(showSidemenu){ 
 
    $showSidemenu.onmouseover($sidemenuShowButton).addclass('show'); 
 
}

#sidemenuShowButton { 
 
    width:60px; 
 
    height:100%; 
 
    background:#000000; 
 
    top:0; 
 
    left:0; 
 
    position:fixed; 
 
} 
 
#sidemenu { 
 
    width: 60px; 
 
    height:100%; 
 
    background-color: #383D3F; 
 
    position: fixed; 
 
    top: 0; 
 
    left:-60px; 
 
    float: left; 
 
    z-index:0; 
 
} 
 
#sidemenu.show { 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="sidemenuShowButton"></div> 
 
<div id="sidemenu"></div>

Answer 1

попробовать это JQuery:

var $showSidemenu = $('#sidemenu'); 
var $sidemenuShowButton = $('#sidemenuShowButton'); 

$(document).ready(function(){ 
    $sidemenuShowButton.on('mouseover',function(){ 
     $('#sidemenu').addClass("show"); 
    }); 
    $sidemenuShowButton.on('mouseout',function(){ 
     $('#sidemenu').removeClass("show"); 
    }); 

    // to make the showed div stay while the mouse is still over it 

    $('#sidemenu').on('mouseover',function(){ 
     $(this).addClass("show"); 
    }); 
    $('#sidemenu').on('mouseout',function(){ 
     $(this).removeClass("show"); 
    }); 
}); 

если вы хотите немного анимации, вы можете использовать CSS3 Transition для этого, как этот:

#sidemenu { 
    transition: 1s; 
} 

HERE'S A WORKING DEMO

Answer 2

шоу Используйте JQuery и скрытие функции. Если вы установили #sidemenu в display: none;. И затем используйте эту функцию:

$('#sidemenu').mouseenter(function(){ 
    $("#sidemenuShowButton").show(); 
}).mouseleave(function(){ 
    $("#sidemenuShowButton").hide(); 
}); 

Никаких классов не требуется таким образом.

Answer 3

Ваш JS должен выглядеть следующим образом:

var $showSidemenu = $('#sidemenu'); 
var $sidemenuShowButton = $('#sidemenuShowButton'); 

$sidemenuShowButton.on('mouseover', function(){ 
    $showSidemenu.addClass('show') 
}); 

Прежде всего вы используете функцию, которая никогда не используется и не может быть использована, так как он не имеет имени. Во-вторых, в jQuery нет метода onmouseover (читайте руководство ;-). В-третьих, вы должны передать туда функцию обратного вызова, которая будет задействована при возникновении события «mouseover».

И если вы хотите скрыть DIV, когда листья мыши добавить

$showSidemenu.on('mouseleave', function(){ 
    $showSidemenu.removeClass('show') 
}); 

Вы должны использовать $ showSidemenu в этом случае вместо $ sidemenuShowButton потому что, когда $ showSidemenu apears мышь оставляет $ sidemenuShowButton и входит в $ showSidemenu. Но если вы хотите использовать анимацию css3, лучше сделать вывод div вложенным для управления div и использовать событие bobbling.

И jsfiddle

Answer 4

Решения: Используйте наведение мыши и MouseOut события для добавления и удаления класса «шоу»

Я намеренно добавляемых MouseOut события на showSidemenu как тогда, когда он скользит в ней переходит sidemenuShowButton DIV и идет поверх него, поэтому прикрепление mouseout to sidemenuShowButton вызовет мерцающий эффект.

http://api.jquery.com/category/events/mouse-events/

$sidemenuShowButton.mouseover(function(){ 
    $showSidemenu.addClass("show"); 
} 
); 

$showSidemenu.mouseout(function(){ 
    $showSidemenu.removeClass("show"); 
} 
); 

Рабочая JS Fiddle Пример: http://jsfiddle.net/2cjjdm7j/1/