在鼠标输入/离开时出现/消失DIV

问题描述

限时删除！！

我正在尝试使用jQuery进行导航.我是jQuery的新手，所以这里有些卡住了.

I'm trying to make a navigation using jQuery. I'm very new to jQuery so I'm getting a bit stuck here.

基本上，我想做的是当我将鼠标移至/移到testbutton1上时，出现并隐藏testbutton2.我能够使它与mouseenter/leave一起使用.

Basically what I'm trying to do is have testbutton2 appear and hide when I mouse over/off testbutton1. I was able to get this to work with mouseenter/leave.

我要添加的部分是，当我将鼠标悬停在testbutton2上时，使testbutton2保持可见；如果将光标移至testbutton1上，则使testbutton2保持可见-因此仅淡入或淡出一次.

The part I'm trying to add is to keep testbutton2 visible when I have the mouse over testbutton2 and to keep testbutton2 visible if I cursor back onto testbutton1 - so only fade in or out once.

您将从我的代码中准确看到我遇到的情况，并且可能会发笑.

You'll see from my code exactly what I encountered and probably have a chuckle.

CSS

#testbutton1 {
float:left;
height:100px;
width:100px;
background:#69C;
}

#testbutton2 {
float:left;
height:100px;
width:100px;
background:#0C6;
display:none;
}

HTML

<div id="testbutton1"></div>
<div id="testbutton2"></div>

jQuery

$("#testbutton1").on({
     mouseenter: function() {
         $("#testbutton2").fadeIn();
     },
     mouseleave: function() {
         $("#testbutton2").fadeOut();
     },

});
$("#testbutton2").on({
     mouseenter: function() {
         $("#testbutton2").fadeIn();
     },
     mouseleave: function() {
         $("#testbutton2").fadeOut();
     },

});

JSFiddle

演示

推荐答案

或者您也可以在纯CSS中完成此操作.将两个按钮都包裹在较大的div中，仅在鼠标悬停在较大的div上时显示第二个按钮:

Or you can do it in pure css.Wrap both buttons in a larger div and show the second button only while the mouse hovers over the larger div:

<div id="buttons">
    <div id="testbutton1"></div>
    <div id="testbutton2"></div>
</div>

#buttons:hover div {
    display:block;
}

http://jsfiddle.net/r267b/1/

这篇关于在鼠标输入/离开时出现/消失DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..