隱藏所有其他的div在DIV懸停相同的名稱，顯示徘徊DIV

我已經生成的PHP名單優惠券，所有與DIV ID（#coupon）和類（.coupon_hover）隱藏所有其他的div在DIV懸停相同的名稱，顯示徘徊DIV

當的用戶懸停在其中一個名爲#coupon的div上，然後我想讓名爲#coupon的所有其他div都消失，除了正在懸停的div。我最好只喜歡在CSS中這樣做。

我已經能夠得到所有的優惠券隱藏低於使用此代碼徘徊的一個：

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

我已經做了小提琴https://jsfiddle.net/04t5psbu/2/

瞭解如何當你將鼠標懸停在第二優惠券第一個留下，最後一個隱藏，我想要它，以便當他們中的任何一個懸停然後所有其他人隱藏接受爲一個懸停，div的名稱必須保持其名稱只是（#coupon）它不能be＃coupon1＃coupon2 ect ....

謝謝您的幫助

來源

2016-06-28 bradders

ID應該是唯一的 –

不？像優惠券 – bradders

它一直都是唯一的。沒有例外。 – eisbehr

你可以嘗試這樣的事情：

JSFiddle

注：

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

來源

2016-06-28 09:05:51 Rajesh

非常感謝您的幫助，這正是我所追求的。 – bradders

嘗試類似這樣的事情。

隱藏一個元素可以通過將display屬性設置爲none來完成。該元素將被隱藏，並且該頁面將顯示爲該元素不存在。 visibility：hidden的;也隱藏了一個元素。但是，元素仍然佔用與以前相同的空間。

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

來源

2016-06-28 09:07:11 Roxoradev

非常感謝您的幫助，這正是我所追求的。 – bradders

如果你想這樣做在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和隱藏他們所做的。希望這有助於。

來源

2016-06-28 09:23:17

你可以使用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

來源

2016-06-28 09:39:40

隱藏所有其他的div在DIV懸停相同的名稱，顯示徘徊DIV

回答

相關問題