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

Question

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

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

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

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

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

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

感谢您的帮助

Answer 1

您可以尝试这样的操作：

JSFiddle

注：

您应该有唯一的 ID。所以要操作相似的元素使用 class.
您应该使用 visibility: hidden 而不是 display: none。 display: none 将改变 DOM 结构，使您的焦点元素移动并最终触发焦点。

Answer 2

尝试这样的事情。

Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there. visibility:hidden; also hides an element. However, the element will still take up the same space as before.

$(".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>

Answer 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;  
 }

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

Answer 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

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

Hide all other divs with the same name on div hover, show hovered div

html

javascript

css

jquery

hover