在第一个元素上悬停时触发:在第二个元素上悬停 [英] Triggering :hover on second element when hovering on first

问题描述

我正在运行此测试页: http://joshuacody.net/qworky/

警告:大量的CSS3.这只会在Safari或Chrome中正确显示.Firefox是可以容忍的.其他所有的都将丢失.

Warning: Tons of CSS3. This will only look right in Safari or Chrome. Firefox will be tolerable. All else will be lost.

本质上，当我将鼠标悬停在某人的名字上时，我也希望它也触发他们图像上的悬停状态.现在正在工作，但是我觉得解决方案不太好.我宁愿不添加更多的类.在这里:

Essentially, when I hover on someone's name, I'd like it to trigger the hover state on their image as well. It's working now, but I feel the solution is inelegant. I'd rather not add more classes. Here it is:

$('a.name_link').hover(function(){
    $(this).parent('p').siblings('img').toggleClass('link_hover');
});

$('img.name_img').hover(function(){
    $(this).siblings('p').children('a').toggleClass('hover');
});

我认为以下方法会起作用:

I thought the following would work:

$('a.name_link').hover(function(){
    $(this).parent('p').siblings('img').trigger('hover');
});

有人知道为什么不是吗?我真的在寻找最干净，最简单的方法来执行此操作.非常感谢！

Any idea why it's not? I'm really looking for the cleanest, simplest way to do this. Thanks so much!

推荐答案

结果是，我可以对CSS进行修改以将img放入锚标记中.

Turns out I could just rework my CSS to do that, putting the img inside of the anchor tag.

这篇关于在第一个元素上悬停时触发:在第二个元素上悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！