jQuery的 - 鼠标悬停

同一类的嵌套的div的变化边框颜色

我的HTML包含一系列嵌套的div的，每个都具有相同的类（“壳”），但唯一的ID。jQuery的 - 鼠标悬停

<div class="shell s01" id="blah"> 
    <!-- s01 content --> 
    <div class="shell s02" id="bar"> 
     <!-- s02 content --> 
     <div class="shell s03" id="wah"> 
      <!-- s03 content --> 
     </div> 

     <div class="shell s03" id="foo"> 
      <!-- s03 content --> 
     </div> 
    </div> 
</div>

我想一个div当鼠标进入它改变的边框颜色，但是当鼠标进入一个子DIV它应该返回到原来的颜色。下面的jQuery代码将边框颜色更改为蓝色，但是在鼠标进入子div时不会将父div边框返回原始颜色（＃8E8DA2）。相反，当把鼠标放在内部div上时，它和它的所有祖先都会突出显示。例如，如果悬停在“wah”上，则“blah”和“bar”也会突出显示。我想要“blah”和“bar”恢复原来的边框颜色。

我明白，当鼠标悬停在儿童身上时，它也会覆盖孩子的父母。但我不确定为什么下面的“父母”声明不能解决问题。

$('.shell').mouseover(function() { 
    $(this).parent('.shell').css('border-color', '#8E8DA2'); 
    $(this).css('border-color', '#0000FF'); 
}); 

$('.shell').mouseout(function() { 
    $(this).css('border-color', '#8E8DA2'); 
});

任何想法？谢谢！

来源

2011-03-10 Fred Mars

其中一个方案是要在单元格的当前边框颜色存储在一个变量，那么一旦鼠标离开小区复位。

从上面的代码，它看起来好像颜色要返回它是一致的，所以你可能只将其存储在其自己的变量到。

你可以重构你的代码一点点，做这样的事情：

var sOriginalColor = '#8E8DA2'; 
$('.shell') 
.mouseover(function(evt) { 
    evt.preventDefault(); // specified for purposes of example mentioned in the comments 
    $(this).parent('.shell').css('border-color', sOriginalColor); 
    $(this).css('border-color', '#0000FF'); 
}) 
.mouseout(function() { 
    $(this).parent('.shell').css('border-color', sOriginalColor); 
    $(this).css('border-color', sOriginalColor); 
});

诚然，我跑了你的代码，但我不能完全肯定，我所提供的解决方案是你是什么寻找，因为有是一些与事件冒泡有关的行为发生。

如果这是您遇到什么，然后读取quirks mode article on events可以帮助你找出什么事。

来源

2011-03-10 14:55:39 Tom

非常感谢！检查出你链接的文章后，我发现[这篇文章在stackoverflow]（http://stackoverflow.com/questions/1327711/jquery-hover-event-with-nested-elements）有一个工作解决方案。现在我需要阅读有关stopPropagation方法的信息，以了解其工作原理。 – 2011-03-10 15:29:19

@Fred Mars你可以在jQuery中的事件处理程序中轻松停止传播。在函数中，例如指定e参数，然后调用e.preventDefault（）。我已经更新了我的答案，只是一个例子。 – Tom 2011-03-10 15:54:00

这应该做的伎俩

$('.shell').mouseenter(function() { 
    $(this).parent('.shell').css('border-color', '#8e8da2'); 
    $(this).css('border-color', '#00f'); 
}); 

$('.shell').mouseleave(function() { 
    $(this).parent('.shell').css('border-color', '#00f'); 
    $(this).css('border-color', '#8e8da2'); 
});

所以首先，你需要使用的mouseenter和鼠标离开，因为他们没有泡沫了，只有他们连接到获得该事件的特定元素。另外，在休假时，您需要给父母以“高亮”颜色，因为当您离开孩子时，最终会在父母身上结束。没有这一点，父母会保持默认颜色，因为mouseenter在这种情况下不会触发 - 似乎让孩子不会触发父母的输入，所以您必须手动完成。

来源

2011-03-10 15:33:15 ilia

谢谢你们 - 对不起，我还没有足够的代表尚未投票答案。

我this other stackoverflow question找到了工作方案。关键是在mouseover事件上调用stopPropagation（）方法。

$('.shell').mouseover(function(e) { 
    e.stopPropagation(); 
    $(this).css('border-color', '#0000FF'); 
}) 

$('.shell').mouseout(function() { 
    $(this).css('border-color', '#8E8DA2'); 
});

来源

2011-03-10 15:45:39

你应该有足够的时间。 – jjnguy 2011-03-10 19:40:21

jQuery的 - 鼠标悬停

回答

相关问题