gpt4 book ai didi

javascript - 悬停滑动选项卡机制

转载 作者:太空宇宙 更新时间:2023-11-04 15:35:06 25 4
gpt4 key购买 nike

我目前正在使用滑动标签。我正在实现悬停功能以触发选项卡向左滑动。唯一的问题是,当鼠标悬停在选项卡上时,选项卡会滑动,但会立即关闭。一旦鼠标悬停在选项卡上,我希望选项卡保持打开状态,关闭选项卡的唯一方法是单击初始的“箭头”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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com