我目前正在使用滑动选项卡。我正在实现悬停功能来触发选项卡向左滑动。唯一的问题是，当鼠标悬停在选项卡上时，选项卡会滑动，但会立即关闭。我希望当鼠标悬停在选项卡上时该选项卡保持打开状态，关闭选项卡的唯一方法是单击初始的“箭头”div。这是我的工作演示:http://jsfiddle.net/eMsQr/6/
<script language="javascript">
$(document).ready(function() {
$("#arrow").hover(
function(){
$("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
},
function(){
$("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
}
);
});
</script>
<html>
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;">
<div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div>
<div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div>
</div>
</html>
最佳答案
你是说这个吗？使用mouseenter - 和click -事件:
$(document).ready(function() {
$("#arrow")
.mouseenter(function(){
$("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
})
.click(function(){
$("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});
});
另请参阅this example .
关于javascript - 悬停滑动选项卡机制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9853044/