在div懸停時隱藏具有相同名稱的所有其他div，顯示懸停的div

Question

我有一個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等等....

感謝您的任何幫助

Answer 1

您可以嘗試如下操作：

JSFiddle

注意：

• 您應該具有唯一的ID。 因此要使用類來操縱類似元素。
• 您應該使用visibility: hidden而不是display: none 。 display: none將改變DOM結構，從而使您的焦點元素轉移並最終觸發焦點。

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

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