jQuery从兄弟模拟css悬停答案

【问题标题】：jQuery simulate css hover from siblingjQuery从兄弟模拟css悬停
【发布时间】：2011-05-20 13:59:45
【问题描述】：

我有一个菜单，每个项目都有以下结构

<li>
  <a href="#">Menu item</a>
  <span></span>
</li>

当有人将鼠标悬停在链接上时，背景会改变颜色，跨度也会发生同样的情况。

我想要发生的是，当有人将鼠标悬停在跨度上时，它还会模拟同级 a 标签的 css 悬停规则。

我可以使用以下方法定位锚元素，我尝试使用 mouseenter 功能，但这并没有给我希望的效果。

$('#menu li span').mouseover(function() {

    $(this).siblings('a').mouseenter();

});

我怎样才能让它工作？

谢谢

【问题讨论】：

您可能正在寻找.trigger()。但我不得不问，为什么这不是你可以用一个简单的 CSS 规则来完成的事情？ li:hover a { new styles here } JS 对我来说似乎有点矫枉过正。
老实说，重新考虑您的标记可能会更好。如果真的需要span，那么可以把它放在A标签里面，这样就解决了这个问题。
如果悬停，我需要链接独立于跨度。但如果跨度悬停，则需要将其显示为链接的一部分。 span 会激活一个下拉菜单，因此需要它。

标签： jquery css

【解决方案1】：

为什么不把鼠标悬停在 li 上？

li:hover a { change...
li:hover span { change...

【讨论】：

【解决方案2】：

为什么不直接在 li 上放一个 css hover？

li:hover{

}

【讨论】：

【解决方案3】：

简单地将mouseenter 函数中的代码粘贴到一个单独的函数中并调用它。例如：

$('#menu li span').mouseover(function() {
    doMouseEnter($(this).siblings('a'));
});

function doMouseEnter(element) {
    ...
}

【讨论】：

【解决方案4】：

有几种解决方案，例如：

对于第二种解决方案，我会使用类似的东西（在文档准备好，未经测试）：

$("#menu li a").each(function() {
  href = $(this).attr("href");
  $(this).parent().click(function() {
    window.location = href;
  });
});

编辑：根据您的 cmets 我建议：

html

<li>
  <a href="#">Menu item<span></span></a>
</li>

css

a:hover {
  // for link
}
a:hover span {
  // for a and span
}
a span:hover {
  // for span
}

而在 jquery 中，您使用 event.preventDefault() 取消对 a span 的点击。

【讨论】：