如何通过使用jquery将鼠标悬停在另一个div上来滑动div？

I have some code here and cannot find out how to make this work because I am still really new to javascript and jquery. I will have a demo below so you can see what I have going on. In the demo there is div positioned left:-60px so it is hidden, this div also has class of 'show' which positions the div to left:0 There is also the long black box which is another div. I want to make it so when you hover over the long black box, it will activate the 'show' property of the other div. Here is my code:

我在这里有一些代码,无法找到如何使这项工作,因为我仍然是javascript和jquery的新手。我将在下面进行演示,以便您了解我的情况。在演示中有div左边:-60px所以它是隐藏的,这个div也有'show'类,它将div定位在左边:0还有一个长黑框,它是另一个div。我想这样做,当你将鼠标悬停在长黑盒子上时,它会激活另一个div的'show'属性。这是我的代码:

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>

4 个解决方案

#1

try this jQuery:

试试这个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");
    });
});

if you want a little animation, you can use CSS3 Transition for that, like this one:

如果你想要一个小动画,你可以使用CSS3 Transition,就像这样:

#sidemenu {  
  transition: 1s;
}

HERE'S A WORKING DEMO

这是一个工作演示

#2

Use JQuery's show and hide functions. If you set your #sidemenu to display: none;. And then use this this function it will work:

使用JQuery的show和hide函数。如果您将#sidemenu设置为display:none;。然后使用此功能它将起作用:

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

No classes are needed in this way.

这种方式不需要任何课程。

#3

Your JS should looks like this:

你的JS应该是这样的:

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

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

First of all you are using function which never used and cannot be used since it have no name. Second, there is no onmouseover method in jQuery (read the manual ;-). Third you have to pass there a callback function which will be involved when 'mouseover' event occurs.

首先,您使用的功能从未使用过,因为没有名称而无法使用。其次,jQuery中没有onmouseover方法(阅读手册;-)。第三,你必须传递一个回调函数,当'鼠标悬停'事件发生时将涉及该函数。

And if you wanna hide your div when mouse leaves add

如果你想在鼠标离开时隐藏你的div

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

You should use $showSidemenu in this case instead of $sidemenuShowButton because when $showSidemenu apears mouse leaves $sidemenuShowButton and enters $showSidemenu. But if you wanna use css3 animation - it's better to make appearing div nested to control div and use event bobbling.

你应该在这种情况下使用$ showSidemenu而不是$ sidemenuShowButton,因为当$ showSidemenu apears鼠标离开$ sidemenuShowButton并输入$ showSidemenu时。但是如果你想使用css3动画 - 最好让出现的div嵌套来控制div并使用事件浮动。

And jsfiddle

#4

Solution:Use mouseover and mouseout events to add and remove class "show"

解决方案:使用mouseover和mouseout事件添加和删除类“show”

I have intentionally added mouseout event on showSidemenu as when it slides in it goes over sidemenuShowButton div and comes on top of it, so attaching mouseout to sidemenuShowButton will cause flickering effect.

我故意在showSidemenu上添加mouseout事件,因为当它滑入时它会越过sidemenuShowButton div并且在它上面,所以将mouseout连接到sidemenuShowButton将导致闪烁效果。

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

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

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

Working JS Fiddle Example: http://jsfiddle.net/2cjjdm7j/1/

工作JS小提琴示例:http://jsfiddle.net/2cjjdm7j/1/

#1