将“单击”功能更改为鼠标切换/鼠标退出
将“单击”功能更改为鼠标切换/鼠标退出
提问于 2011-07-05 23:18:57
我使用以下滑动div脚本：
http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html
当前，当单击.btr-幻灯片按钮时，将激活滑块切换函数。这将滑向“面板”div。
第二次单击.btr-幻灯片按钮时，面板div将关闭。
我在js是一个完整的新手，所以任何的帮助都将不胜感激。我想做的是：
1)当鼠标移动(而不是单击)..btn幻灯片类时，我希望面板滑出。2)然后，当鼠标从..btn幻灯片或#面板移出时，我希望面板关闭。(但如果鼠标在任何一个上面，面板应该保持打开)。
我能够让它工作到滑动键函数关闭其中一个或另一个，但不是两者都关闭的地方。
提前谢谢你的帮助。
由衷地，
Mac
这是JS：
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$('.btn-slide').click(function() {
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
});
</script>
here is the HTML currently being used:
<div id="prod_nav_tab">
<div id="panel">
This is where stuff goes!
</div>
<p class="slide"><a class="btn-slide">Table of Contents</a></p>
</div>我玩的CSS适合我的特定网站，是如下(原来的js，html，css可以从上面的链接)。
div#prod_nav_tab {
width: 200px;
height: 31px;
overflow: hidden;
background-color:#F00;
float: left;
margin: 0px 0px 0px 75px;
}
a:focus {
outline: none;
}
#panel {
background-color:#F00;
width: 200px;
height: 200px;
display: none;
position: absolute;
bottom: 0px;
}
.slide {
margin: 0;
padding: 0;
/* border-top: solid 4px #422410; **Adds a line at top of slide button to distibuish it */
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: #d8d8d8;
text-align: center;
width: 200px;
height: 31px;
padding: 0px 0px 0 0;
margin: 0 0 0 0;
display: block;
font: bold 12pt Arial, Helvetica, sans-serif;
color: #666;
text-decoration: none;
position: relative;
cursor: pointer;
/* background: url(images/white-arrow.gif) no-repeat right -50px; ** Controls Arrow up/down */
}
.active {
background-position: right 12px;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2011-07-05 23:28:56
当您从..btn幻灯片移到#面板时，它现在会隐藏它，因为它会触发..btn幻灯片的mouseleave事件。
为了防止这种情况发生，你应该做如下的事情：
HTML：
<div id="trigger">
<a href="" class="btn-slide">Slide down</a>
<div id="panel">
Content of your panel
</div>
</div>JQuery：
jQuery(function($) {
$(document).ready(function() {
$("#trigger").mouseenter(function() {
$("#panel").slideDown("slow");
$(this).addClass("active");
}).mouseleave(function() {
$("#panel").slideUp("slow");
$(this).removeClass("active");
});
});
});确保在你的CSS，然后你设置面板隐藏从一开始..。
div#panel {
display: none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6589936
复制相关文章
相似问题
腾讯云开发者
