Question

我在这里有一些代码，无法找到如何使这项工作，因为我仍然是javascript和jquery的新手。我将在下面进行演示，以便您了解我的情况。在演示中有div定位left:-60px所以它被隐藏，这个div也有'show'类，它将div定位到left: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>

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的show和hide函数。如果您将#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方法（阅读手册;-)。第三，你必须通过一个回调函数，当鼠标移动时会涉及到这个函数。事件发生。

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

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

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

jsfiddle

Answer 4

解决方案：使用鼠标悬停和鼠标移除事件添加和删除课程＆＃34;显示＆＃34;

我故意在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");
}
);

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

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

4 个答案: