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 ect ....

感谢您的帮助

Answer 1

您可以尝试这样的事情：

JSFiddle

注意：

你应该有独特的ID。所以要操纵类似的元素使用class。

您应该使用visibility: hidden代替display: none。 display: none将更改DOM结构，使您的焦点元素移动并最终触发焦点。

Answer 2

尝试这样的事情。

隐藏元素可以通过将display属性设置为none来完成。元素将被隐藏，页面将显示为元素不在那里。 visibility：hidden的;也隐藏了一个元素。但是，该元素仍将占用与以前相同的空间。

＆＃13;

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

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

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 hover上隐藏所有其他具有相同名称的div，显示悬停的div

4 个答案: