jQuery模拟css从兄弟中悬停

Question

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

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

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

我想要发生的事情是，当某人在跨度上盘旋时，它还会模拟兄弟标记的css悬停规则。

我可以使用以下内容定位锚元素，我尝试使用mouseenter函数，但这并没有给我带来希望的效果。

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

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

});

我怎样才能使这个工作？

由于

Answer 1

为什么不把悬停在李？

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

Answer 2

你为什么不把css悬停在li？

上

li:hover{

}

Answer 3

有一些解决方案，例如：

1. 你可以将跨度移动到链接内部并给它一个display:block，使它显示在它下面（这就是我要做的，这是最简单的解决方案）;
2. 您可以使用jquery获取所有链接的href，并将其添加为li的链接/点击。

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

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

修改：根据您的意见，我建议：

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上的点击。

Answer 4

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

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

function doMouseEnter(element) {
    ...
}