悬停效果保持 div 打开
Keep div open on hover effect
我正在考虑使用以下内容:
http://jsfiddle.net/webdevem/4RgTS/
但我需要一种方法来确保当您将鼠标悬停在出现的 div 上时 div 保持打开状态。
代码如下:
$(document).ready(function() {
$("#toggleSwitch_j").hover(
function() {
$("#theBox_3").slideDown(500);
}, function() {
$("#theBox_3").slideUp(500);
});
$("#StayOpen").hover(
function() {
$("#theBox_2").slideDown(500);
}, function() {
$("#theBox_2").slideUp(500);
});
});
<a href="#" id="toggleSwitch_j">jQuery Hover</a><div id="theBox_3">Peek-a-boo!</div>
#theBox_3, #theBox_2{
display: none;
border: 1px solid #000;
width: 200px;
height: 100px;
background-color: #ddf;
position: absolute;
}
#toggleSwitch_j, #StayOpen {
background-color: #cacaca;
}
为此,您需要评论 slideUp
。
例如,
$(document).ready(function() {
$("#toggleSwitch_j").hover(
function() {
$("#theBox_3").slideDown(500);
}, function() {
//$("#theBox_3").slideUp(500);
});
$("#StayOpen").hover(
function() {
$("#theBox_2").slideDown(500);
}, function() {
//$("#theBox_2").slideUp(500);
});
});
通过这样做,可以确保当您将鼠标悬停在您提到的 div 上时 div 保持打开状态。
希望对您有所帮助。
尝试类似的东西
$(document).ready(function() {
$("#toggleSwitch_j").mouseover(
function() {
$("#theBox_3").slideDown(500);
});
$("#theBox_3").mouseleave(function(e) {
console.log($(e.target));
$("#theBox_3").slideUp(500);
});
});
试试下面的代码。
$(document).ready(function() {
var divBox = $("#theBox_3");
$("#toggleSwitch_j").hover( function() {
divBox.slideDown(500);
});
divBox.mouseout(function() {
$(this).slideUp(500);
});
});
我会说不需要评论它应该被删除,如果没有用,你的功能应该是这个
$("#toggleSwitch_j").hover(
function() {
$("#theBox_3").slideDown(500);
});
$("#StayOpen").hover(
function() {
$("#theBox_2").slideDown(500);
});
});
这里是 demo on Fiddle 带有文字输入的试写和 CSS 修改 CSS 动画(过渡)。
jQuery
// Function fires when hover on the link
$(document).ready(function ($) {
$(document).on('hover', '.hover-me', function (e) {
e.preventDefault();
$(this).closest("div").find(".pop-on-hover").removeClass("closed").addClass("opened");
});
// Function fires when click anywhere outside the slided div
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".pop-on-hover").hasClass("pop-on-hover opened");
if (_opened == true && !clickover.hasClass("hover-me") && !clickover.hasClass("pop-on-hover") && clickover.parents('.pop-on-hover').length == 0) {
event.preventDefault();
CloseHovered();
}
});
// Close hovered panel function
function CloseHovered() {
$(".pop-on-hover").removeClass("opened").addClass("closed");
}
});
CSS
body {
background-color: #eef;
}
.pop-on-hover {
border: 1px solid #000;
width: 200px;
background-color: #ddf;
height:0px;
overflow:hidden;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
transition: all .25s ease-out;
}
#toggleSwitch_j, #StayOpen {
background-color: #cacaca;
}
.pop-on-hover.closed {
height:0px;
}
.pop-on-hover.opened {
height:80px;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
transition: all .25s ease-out;
}
更新
如果您需要打开此部分,您可以不使用或以其他方式使用它。
if (_opened == true && !clickover.hasClass("hover-me") && !clickover.hasClass("pop-on-hover") && clickover.parents('.pop-on-hover').length == 0) {
event.preventDefault();
CloseHovered();
}
我正在考虑使用以下内容:
http://jsfiddle.net/webdevem/4RgTS/
但我需要一种方法来确保当您将鼠标悬停在出现的 div 上时 div 保持打开状态。
代码如下:
$(document).ready(function() {
$("#toggleSwitch_j").hover(
function() {
$("#theBox_3").slideDown(500);
}, function() {
$("#theBox_3").slideUp(500);
});
$("#StayOpen").hover(
function() {
$("#theBox_2").slideDown(500);
}, function() {
$("#theBox_2").slideUp(500);
});
});
<a href="#" id="toggleSwitch_j">jQuery Hover</a><div id="theBox_3">Peek-a-boo!</div>
#theBox_3, #theBox_2{
display: none;
border: 1px solid #000;
width: 200px;
height: 100px;
background-color: #ddf;
position: absolute;
}
#toggleSwitch_j, #StayOpen {
background-color: #cacaca;
}
为此,您需要评论 slideUp
。
例如,
$(document).ready(function() {
$("#toggleSwitch_j").hover(
function() {
$("#theBox_3").slideDown(500);
}, function() {
//$("#theBox_3").slideUp(500);
});
$("#StayOpen").hover(
function() {
$("#theBox_2").slideDown(500);
}, function() {
//$("#theBox_2").slideUp(500);
});
});
通过这样做,可以确保当您将鼠标悬停在您提到的 div 上时 div 保持打开状态。
希望对您有所帮助。
尝试类似的东西
$(document).ready(function() {
$("#toggleSwitch_j").mouseover(
function() {
$("#theBox_3").slideDown(500);
});
$("#theBox_3").mouseleave(function(e) {
console.log($(e.target));
$("#theBox_3").slideUp(500);
});
});
试试下面的代码。
$(document).ready(function() {
var divBox = $("#theBox_3");
$("#toggleSwitch_j").hover( function() {
divBox.slideDown(500);
});
divBox.mouseout(function() {
$(this).slideUp(500);
});
});
我会说不需要评论它应该被删除,如果没有用,你的功能应该是这个
$("#toggleSwitch_j").hover(
function() {
$("#theBox_3").slideDown(500);
});
$("#StayOpen").hover(
function() {
$("#theBox_2").slideDown(500);
});
});
这里是 demo on Fiddle 带有文字输入的试写和 CSS 修改 CSS 动画(过渡)。
jQuery
// Function fires when hover on the link
$(document).ready(function ($) {
$(document).on('hover', '.hover-me', function (e) {
e.preventDefault();
$(this).closest("div").find(".pop-on-hover").removeClass("closed").addClass("opened");
});
// Function fires when click anywhere outside the slided div
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".pop-on-hover").hasClass("pop-on-hover opened");
if (_opened == true && !clickover.hasClass("hover-me") && !clickover.hasClass("pop-on-hover") && clickover.parents('.pop-on-hover').length == 0) {
event.preventDefault();
CloseHovered();
}
});
// Close hovered panel function
function CloseHovered() {
$(".pop-on-hover").removeClass("opened").addClass("closed");
}
});
CSS
body {
background-color: #eef;
}
.pop-on-hover {
border: 1px solid #000;
width: 200px;
background-color: #ddf;
height:0px;
overflow:hidden;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
transition: all .25s ease-out;
}
#toggleSwitch_j, #StayOpen {
background-color: #cacaca;
}
.pop-on-hover.closed {
height:0px;
}
.pop-on-hover.opened {
height:80px;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
transition: all .25s ease-out;
}
更新
如果您需要打开此部分,您可以不使用或以其他方式使用它。
if (_opened == true && !clickover.hasClass("hover-me") && !clickover.hasClass("pop-on-hover") && clickover.parents('.pop-on-hover').length == 0) {
event.preventDefault();
CloseHovered();
}