如何在可滚动的div中放置同位素项并保持jquery悬停状态效果?
我正在尝试实现三个功能:如何在可滚动的div中放置同位素项并保持jquery悬停状态效果?,jquery,css,hover,overflow,jquery-isotope,Jquery,Css,Hover,Overflow,Jquery Isotope,我正在尝试实现三个功能: 包含图像缩略图的可滚动div 可以按jquery排序 当鼠标悬停在其他元素顶部和直接容器之外时,会显示一个div 目前,我可以得到一个或另一个发生,即滚动条显示,但悬停状态div在其他元素后面,或者我可以得到悬停状态div在其他元素前面,但滚动条不显示 jsfiddle $(".magic").each(function() { var hiddenDiv = $(this).find(".hidden_db_data_div"), parentElement = $
$(".magic").each(function() {
var hiddenDiv = $(this).find(".hidden_db_data_div"),
parentElement = $(this),
api = {};
api.isOpen = false;
api.timeout = null;
api.position = function(){
hiddenDiv.css({
"top": parentElement.offset().top - $("#wrapper").offset().top - 50,
"left": parentElement.offset().left - $("#wrapper").offset().left +20
});
}
api.resetTimeout = function(){
clearTimeout( api.timeout );
}
api.startShowing = function(){
api.resetTimeout();
api.timeout = setTimeout(function(){
api.show();
},300);
}
api.startHiding = function(){
api.resetTimeout();
api.timeout = setTimeout(function(){
api.hide();
},150);
}
api.show= function(){
if(!api.isOpen){
api.position();
hiddenDiv .fadeIn(500);
api.isOpen = true;
$("#isotope_container").bind("scroll.hiddendiv",api.position);
}
}
api.hide = function(){
if( api.isOpen ) {
api.isOpen = false;
$("#isotope_container").unbind("scroll.hiddendiv");
hiddenDiv.fadeOut(100);
}
}
hiddenDiv.bind("mouseenter", function() {
api.resetTimeout();
}).bind("mouseleave", function() {
api.startHiding();
}).css("z-index", 100).appendTo("#wrapper");
$(this).data("hiddenApi",api );
}).bind("mouseenter", function() {
var api = $(this).data("hiddenApi");
api.startShowing();
}).bind("mouseleave", function() { // start closing timeout once mouse leaves isotope element
var api = $(this).data("hiddenApi");
api.startHiding();
});
脚本
$(".magic").hover(
function() {
//console.log($(this).find('.hidden_db_data_div').position().left);
console.log($(this).position().top);
$(this).css("z-index", "999").find('.hidden_db_data_div').css({
'left': $(this).position().left + 40 + "px" + "!important",
'top': '-50px'
}).fadeIn(500);
}, function() {
$(this).css('z-index', '').find('.hidden_db_data_div').fadeOut(100);
});
多谢各位 已解决 代码
$(".magic").each(function() {
var hiddenDiv = $(this).find(".hidden_db_data_div"),
parentElement = $(this),
api = {};
api.isOpen = false;
api.timeout = null;
api.position = function(){
hiddenDiv.css({
"top": parentElement.offset().top - $("#wrapper").offset().top - 50,
"left": parentElement.offset().left - $("#wrapper").offset().left +20
});
}
api.resetTimeout = function(){
clearTimeout( api.timeout );
}
api.startShowing = function(){
api.resetTimeout();
api.timeout = setTimeout(function(){
api.show();
},300);
}
api.startHiding = function(){
api.resetTimeout();
api.timeout = setTimeout(function(){
api.hide();
},150);
}
api.show= function(){
if(!api.isOpen){
api.position();
hiddenDiv .fadeIn(500);
api.isOpen = true;
$("#isotope_container").bind("scroll.hiddendiv",api.position);
}
}
api.hide = function(){
if( api.isOpen ) {
api.isOpen = false;
$("#isotope_container").unbind("scroll.hiddendiv");
hiddenDiv.fadeOut(100);
}
}
hiddenDiv.bind("mouseenter", function() {
api.resetTimeout();
}).bind("mouseleave", function() {
api.startHiding();
}).css("z-index", 100).appendTo("#wrapper");
$(this).data("hiddenApi",api );
}).bind("mouseenter", function() {
var api = $(this).data("hiddenApi");
api.startShowing();
}).bind("mouseleave", function() { // start closing timeout once mouse leaves isotope element
var api = $(this).data("hiddenApi");
api.startHiding();
});
已解决 代码
$(".magic").each(function() {
var hiddenDiv = $(this).find(".hidden_db_data_div"),
parentElement = $(this),
api = {};
api.isOpen = false;
api.timeout = null;
api.position = function(){
hiddenDiv.css({
"top": parentElement.offset().top - $("#wrapper").offset().top - 50,
"left": parentElement.offset().left - $("#wrapper").offset().left +20
});
}
api.resetTimeout = function(){
clearTimeout( api.timeout );
}
api.startShowing = function(){
api.resetTimeout();
api.timeout = setTimeout(function(){
api.show();
},300);
}
api.startHiding = function(){
api.resetTimeout();
api.timeout = setTimeout(function(){
api.hide();
},150);
}
api.show= function(){
if(!api.isOpen){
api.position();
hiddenDiv .fadeIn(500);
api.isOpen = true;
$("#isotope_container").bind("scroll.hiddendiv",api.position);
}
}
api.hide = function(){
if( api.isOpen ) {
api.isOpen = false;
$("#isotope_container").unbind("scroll.hiddendiv");
hiddenDiv.fadeOut(100);
}
}
hiddenDiv.bind("mouseenter", function() {
api.resetTimeout();
}).bind("mouseleave", function() {
api.startHiding();
}).css("z-index", 100).appendTo("#wrapper");
$(this).data("hiddenApi",api );
}).bind("mouseenter", function() {
var api = $(this).data("hiddenApi");
api.startShowing();
}).bind("mouseleave", function() { // start closing timeout once mouse leaves isotope element
var api = $(this).data("hiddenApi");
api.startHiding();
});