我onmouseout
在绝对位置div中的函数遇到麻烦。当鼠标点击div中的一个子元素时,将触发mouseout事件,但是我不希望它触发,直到鼠标不在父绝对div之外。
我如何防止mouseout
事件在没有jquery的情况下击中子元素而触发。
我知道这与事件冒泡有关,但是我没有运气去寻找解决方法。
但是,该解决方案使用jQuery。
function onMouseOut(event) {
//this is the original element the event handler was assigned to
var e = event.toElement || event.relatedTarget;
if (e.parentNode == this || e == this) {
return;
}
alert('MouseOut');
// handle mouse event here!
}
document.getElementById('parent').addEventListener('mouseout',onMouseOut,true);
我制作了一个快速的JsFiddle演示,其中包含所有需要的CSS和HTML,请查看…
注意 ,这仅检查直接父级,如果父级div嵌套了子级,则您必须以某种方式遍历父级元素以寻找“原始元素”
*嵌套孩子的 *编辑 示例
编辑 固定为希望跨浏览器
function makeMouseOutFn(elem){
var list = traverseChildren(elem);
return function onMouseOut(event) {
var e = event.toElement || event.relatedTarget;
if (!!~list.indexOf(e)) {
return;
}
alert('MouseOut');
// handle mouse event here!
};
}
//using closure to cache all child elements
var parent = document.getElementById("parent");
parent.addEventListener('mouseout',makeMouseOutFn(parent),true);
//quick and dirty DFS children traversal,
function traverseChildren(elem){
var children = [];
var q = [];
q.push(elem);
while (q.length > 0) {
var elem = q.pop();
children.push(elem);
pushAll(elem.children);
}
function pushAll(elemArray){
for(var i=0; i < elemArray.length; i++) {
q.push(elemArray[i]);
}
}
return children;
}
问题内容: 首先,我假设对于CSS3来说这太复杂了,但是如果某个地方有解决方案,我很乐意使用它。 HTML非常简单。 子div设置为显示:无;默认情况下,但更改为display:block; 当鼠标悬停在父div上时。问题是此标记出现在我网站上的多个位置,并且我只希望在鼠标悬停在其父项上方时显示该子项,而不是在鼠标悬停在其他任何父项上时都显示该子项(它们都具有相同的类)名称和ID)。 我尝试使用并
问题内容: 当我将鼠标悬停在DIV上时,它将触发将鼠标悬停在父DIV上,这对我来说似乎是错误的。我只希望“突出显示”效果在子DIV 上起作用。 问题答案: 根据定义,将鼠标悬停在孩子上,也将鼠标悬停在父母上。html事件中没有“阻止”。 有两个方法链,气泡和捕获。 W3C事件模型中发生的任何事件都首先被捕获,直到到达目标元素,然后再次冒泡。 http://www.quirksmode.org/js
如果孩子在焦点中(已被点击),我怎么能失去父母的悬停状态?我有一个菜单箭头(用OPEN代替了它,以减少代码),它在悬停状态下打开我的菜单和菜单项,当我单击它们时,菜单项就会聚焦。在菜单项点击后,我希望能够失去对我父母的关注,这样菜单就会消失。 如果可能的话,我会尽量避免使用javascript,这是我最好的尝试... 这是我的html null null 编辑 我在一个单页应用程序上使用Angul
问题内容: 如果我有标记: .a类具有与之关联的悬停类 .b类具有与之关联的伪元素…像这样: CSS是否有可能防止伪元素触发.a类悬停? 小提琴 问题答案: 以下CSS为现代浏览器(而非IE10-)提供了诀窍: 允许元素不接收悬停/点击事件。 警告 对非SVG元素的支持处于相对早期的状态。developer.mozilla.org给您以下警告: 在CSS中将指针事件用于非SVG元素是实验性的。 该
所以我使用这个代码来显示菜单中的深度3元素(wordpress): 问题是,当我悬停在一个带有子菜单的元素上时,所有带有子菜单的元素都会显示出来。 问题是: 如何只显示一个子菜单,我在我的鼠标悬停的时刻? 很抱歉添加了标记,无法添加“jquery” 编辑: HTML:
问题内容: 所以我有2个,彼此一样,像这样 我想改变的时候我悬停。 但是我希望悬停时再次恢复正常。 当我将鼠标悬停在深蓝色区域上时,我希望不是那么深蓝色的区域保持不是那么深蓝色,而不是变成白色。 我想保持这种结构。而且我不想要JavaScript解决方案(我知道JavaScript解决方案,但我想保留纯CSS)。 问题答案: .parent {