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

【问题标题】：Hide all other divs with the same name on div hover, show hovered div在 div 悬停时隐藏所有其他具有相同名称的 div，显示悬停的 div
【发布时间】：2016-06-28 08:50:46
【问题描述】：

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

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

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

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

我做了一个小提琴https://jsfiddle.net/04t5psbu/2/

查看当您将鼠标悬停在第二张优惠券上时，第一个优惠券如何停留而最后一个优惠券隐藏，我想要它，以便当其中任何一个悬停时，所有其他优惠券都隐藏接受悬停的优惠券，div 的名称必须保持它的名字只是（#coupon）它不能是#coupon1 #coupon2 等......

感谢您的帮助

【问题讨论】：

ID 应该是唯一的
不是刚设计的时候？像优惠券
它必须始终是唯一的。没有例外。
怎么了？然后使用类，而不是 ID！
这是一个类的用途......

标签： javascript jquery html css hover

【解决方案1】：

你可以试试这样的：

JSFiddle

注意：

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

【讨论】：

非常感谢您的帮助，这正是我所追求的。

【解决方案2】：

试试这样的。

可以通过将 display 属性设置为 none 来隐藏元素。该元素将被隐藏，页面将显示为好像该元素不存在一样。可见性：隐藏；还隐藏了一个元素。但是，该元素仍将占用与以前相同的空间。

$(".coupon").on("mouseover",function(){
  $(".coupon").not(this).css("visibility","hidden");
});
$(".coupon").on("mouseout",function(){
  $(".coupon").css("visibility","visible");
});

.coupon{
  width:100px;
  height:70px;
  background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="coupon">
  Coupon 1
</div>
<div class="coupon">
  Coupon 2
</div>
<div class="coupon">
  Coupon 3
</div>
<div class="coupon">
  Coupon 4
</div>

【讨论】：

非常感谢您的帮助，这正是我所追求的。

【解决方案3】：

如果你想在 css 中做这件事，这可能会对你有所帮助。

<div id="coupon-container">
  <div id="coupon1" class="custom-size">
     One
  </div>
  <div id="coupon2" class="custom-size">
     Two
  </div>
  <div id="coupon3" class="custom-size">
     Three
  </div>
  <div id="coupon4" class="custom-size">
     Four
  </div>  
</div>

CSS：

 .custom-size{
    height:150px;
    width:600px;  
    border: 1px solid red;
 }

 #coupon-container:hover   div[id^='coupon']:not(:hover) {
     display: none;  
 }

同样的事情可以在 javascipts 中通过查找其他元素的 id 并隐藏它们来完成。希望这会有所帮助。

【讨论】：

【解决方案4】：

当用户在鼠标事件的帮助下浏览优惠券时，您可以使用 jquery 并隐藏所有其他优惠券。

    $(function() {

   // on mouse enter hide other and show current one
   $(".coupon_hover1").mouseenter(function(event) {
     $(".coupon_hover1").each(function() {
       $(this).hide();
     });
     $(this).show();
   });

   // on mouse leave show all coupons as before
   $(".coupon_hover1").mouseleave(function(event) {
     $(".coupon_hover1").each(function() {
       $(this).show();
     });
   });
 })

jsfiddle

【讨论】：