在动态的悬停状态数组中写入鼠标离开状态
write mouseout state within array of dynamic if else hover states
我在数组中调用了一系列的悬停状态,其中每个唯一的项目显示唯一的悬停内容(在相同的悬停类中)。样式相同,但内容不同。)
更新:完整JS如下:
$('.meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent').hover(function(){
var location = $(this).offset();
console.log('location: ', location);
$('.overlayContent').css({'display': 'inline-block', 'height': ($(this).height()+'px'), 'width': ($(this).width()+'px'), 'top': (location.top - $('#schlMainContent').offset().top), 'left': (location.left - $('.classicBooks').offset().left)});
$('.overlayContent', this).show();
var bookName = $(this).attr('class');
if (bookName == 'meJane') {
// links for jane
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'antarcticAntics') {
// links for antarcticAntics
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'pigeon') {
// links for pigeon
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'marchOn') {
// links for marchOn
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'nelson') {
//links for nelson
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'president') {
// links for president
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'owen') {
// links for owen
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'tealBook') {
// links for tealBook
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'children') {
// links for children
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){
console.log('bookName: ', bookName);
openPopUp(bookName);
});
} else if (bookName == 'dot') {
// links for dot
$('#previewLink').attr('class', 'play' + bookName);
$('#shopLink').attr('href', 'http://www.uniquelink.com');
$('.preview').click(function(){ // .preview is same as openPopup
console.log('bookName: ', bookName);
openPopUp(bookName);
});
}
我需要添加一个mouseOut状态,因为目前,悬停状态被删除的唯一方式是当你悬停到下一个项目。当你把鼠标移出那个区域时,我需要它完全移除。关于如何通过mouseout().
回归到正常状态有什么想法吗
尝试,mouseleave :
$('.meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent').on('mouseleave',function(){
$('.overlayContent').css({'display': 'none'});
尝试:
$( ".meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent" ).off( "mouseleave" );
});
} else {
$( ".meJane, .antarcticAntics, .pigeon, .marchOn, .nelson, .president, .owen, .tealBook, .children, .dot, .overlayContent" ).css({'display': 'none'});
}
});
.hover
函数实际上接受第二个参数,该参数将在鼠标退出时调用。看看下面的代码:
$('.selectors').hover(function() {
// mouse in
$('.something').show();
}, function() {
// mouse out
$('.something').hide();
});
查看手册了解更多细节:http://api.jquery.com/hover
还有一个非常基本的例子来演示:http://jsfiddle.net/j36mw6zr/相关文章:
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 如何知道鼠标按钮的当前状态(mouseup状态或mousedown状态)
- 如何使用Javascript检查当前鼠标按钮状态
- 如何在按下鼠标时在 Chrome 中保持悬停状态
- 当鼠标悬停在链接上时,从 href URL 中隐藏状态栏值
- 当用户将鼠标悬停在 Chrome 或 Firefox 中的链接上时,悬停状态未激活
- 高图表.js添加鼠标悬停功能或悬停状态(实现中断图表?
- 在鼠标(指针设备)未处于活动状态(不移动)时隐藏按钮
- 防止将鼠标悬停在活动状态上
- 在JavaScript或jQuery中检测鼠标的当前状态,即它的向下或向上
- location.href将鼠标悬停在链接上时,使目标显示在状态栏中
- 鼠标在全屏+指针锁定状态下按下任何键时都不会启动
- 将鼠标悬停在父菜单或菜单上时,保持弹出菜单处于打开状态
- Javascript:子级不应该从父级继承鼠标状态
- jQuery如何在鼠标仍处于按下状态时触发拖动事件
- 鼠标悬停状态闪烁
- 悬停保持活动状态,直到鼠标移到另一个悬停对象上
- 鼠标停留在一个状态上,用d3地图改变其他状态的颜色
- 鼠标悬停在菜单项上可以触发原生的“:hover”吗?另一个元素的状态
- 鼠标悬停时淡出到原始状态,或者单击鼠标停留在悬停状态