javascript - 在 div 悬停时隐藏所有其他具有相同名称的 div，显示悬停的 div

Question

我有一个 PHP 生成的优惠券列表，所有优惠券都带有 div id (#coupon) 和类 (.coupon_hover)

当用户将鼠标悬停在名为 #coupon 的 div 之一上时，我希望所有其他名为 #coupon 的 div 都消失，除了悬停在上面的那个。我最好只在 CSS 中这样做。

我已经能够让所有优惠券隐藏在使用此代码悬停的优惠券下方:

#coupon:hover ~ .coupon_hover {
display:none;
}

我做了一个 fiddle https://jsfiddle.net/04t5psbu/2/

看看当你将鼠标悬停在第二张优惠券上时，第一个保留而最后一个隐藏，我想要这样当其中任何一个悬停时，所有其他优惠券都隐藏接受悬停的那个，div 的名称必须保持它的名字只是(#coupon)它不能是#coupon1 #coupon2 ect ....

谢谢你的帮助

Answer 1

你可以尝试这样的事情:

JSFiddle

注意:

• 您应该拥有唯一的 ID。因此，要操纵相似的元素，请使用类。
• 您应该使用 visibility: hidden 而不是 display: none。 display: none 将改变 DOM 结构，使您的焦点元素移动并最终触发焦点移出。