OnHover over the div,<a> tag is not going on to the link</a>

时间:2015-01-09 12:58:00

标签: javascript jquery html css

基本上,

我有一个无效的情景。让我解释一下。

我有一个div,其中另一个div来了,之前的div进入后台。现在这里发生的是,

悬停后出现的div包含一个按钮。按钮上有链接,可以重定向到另一个页面。还有那个div。我有一个<a>标记,它也有一个链接,但点击它就不起作用。

当我删除按钮时它可以工作,但我也想要按钮。

请参阅代码供您参考: -  如果您还有其他需要,请告诉我

&#13;
&#13;
<div class="product-image-wrapper hidden-cls">
  <div class="single-products">
    <div class="productinfo">
      <img src="images/shop/product12.png" alt="" />
      <div class="padding-left">
        <h5>Koryo KLE32ELBH 
                    <br/>LED TV
                </h5>
        <p class="para-sky">Only 2 units left</p>
        <p>Koryo</p>
        <div class="arrow_box_blue">Best Seller</div>
        <br/>
        <p class="parag">
          <del>&#2352;</del>&nbsp;&nbsp;13,999
        </p>
        <h2>
                    <del>&#2352;</del>&nbsp;&nbsp;42,680
                </h2>
        <label>
          <input type="checkbox" name="sport[]" value="deposit">Add to Compare

        </label>
        <br/>
      </div>
    </div>
    <a href="pdp.html">
      <div class="product-overlay">
        <div class="overlay-content">
          <!--   <a href="#" class="btn btn-default add-to-cart">Qick Info</a> -->
          <a href="#" data-featherlight="#fl12" class="btn btn-default add-to-cart">Quick Info</a>
          <div class="lightbox" id="fl12">
            <div class="top-header"></div>
            <div class="col-sm-12">
              <div class="col-sm-5">
                <div class="product-details">
                  <!--product-details-->
                  <div class="arrow_box_red0 seller">Best Seller</div>
                  <div class="view-product" style="margin-top: 50px;">
                    <div class="thumb-image">
                      <img src="images/product-details/img-thumb-big1.png" data-imagezoom="true">
                    </div>
                  </div>
                  <h4 class="zoom-img">Mouse over image to zoom in</h4>
                  <div id="similar-product" class="carousel slide top-bottom-border" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                      <div class="item active">
                        <a href="">
                          <img src="images/product-details/thumbnil1.png" alt="">
                        </a>
                        <a href="">
                          <img src="images/product-details/thumbnil2.png" alt="">
                        </a>
                        <a href="">
                          <img src="images/product-details/thumbnil3.png" alt="">
                        </a>
                        <a href="">
                          <img src="images/product-details/thumbnil4.png" alt="">
                        </a>
                      </div>
                      <div class="item">
                        <a href="">
                          <img src="images/product-details/thumbnil1.png" alt="">
                        </a>
                        <a href="">
                          <img src="images/product-details/thumbnil2.png" alt="">
                        </a>
                        <a href="">
                          <img src="images/product-details/thumbnil3.png" alt="">
                        </a>
                        <a href="">
                          <img src="images/product-details/thumbnil4.png" alt="">
                        </a>
                      </div>
                      <div class="item">
                        <a href="">
                          <img src="images/product-details/thumbnil1.png" alt="">
                        </a>
                        <a href="">
                          <img src="images/product-details/thumbnil2.png" alt="">
                        </a>
                        <a href="">
                          <img src="images/product-details/thumbnil3.png" alt="">
                        </a>
                        <a href="">
                          <img src="images/product-details/thumbnil4.png" alt="">
                        </a>
                      </div>
                    </div>
                    <!-- Controls -->
                    <a class="left item-control" href="#similar-product" data-slide="prev">
                      <i class="fa fa-angle-left"></i>
                    </a>
                    <a class="right item-control" href="#similar-product" data-slide="next">
                      <i class="fa fa-angle-right"></i>
                    </a>
                  </div>
                </div>
                <!--/product-details-->
              </div>
              <div class="col-sm-7">
                <div class="table-responsive cart_info">
                  <h3>Samsung 32 H40000</h3>
                  <table class="table table-condensed">
                    <thead>
                      <tr class="cart_menu">
                        <td colspan="4" class="image blue">
                          <span> SKU ID:</span> 000000006000013898
                        </td>
                        <td class="total text-right pull-right"></td>
                        <td width="220" class="total text-right">
                          <div>
                            <p class="pull-right">Add to Wishlist
                              <span> ♥
                                                                                                                        <span></span>
                              </span>
                            </p>
                          </div>
                        </td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr style="border-bottom: 1px solid #cfccca;">
                        <td colspan="4" class="tab-ProF">
                          <h5 class="key-features">Key Features</h5>
                          <ul class="key-features">
                            <li>32 Inches</li>
                            <li>USB support-Multi- Format Play</li>
                            <li>2 x HDMI</li>
                          </ul>
                        </td>
                        <td colspan="4" class="product-share-app text-right top">
                          <div class="btn-group top share-app">
                            <div class="rating">
                              <img src="images/star.png">
                              <span>Rating</span>
                              <div class="reviews">Reviews (045)</div>
                            </div>
                            <div>
                              <h1 class="pull-left">Share this on</h1>
                              <ul class="nav nav-pills nav-stacked pull-right icon social-icon">
                                <li>
                                  <div class="social-icons">
                                    <ul class="nav navbar-nav">
                                      <li>
                                        <a class="t" href="#">
                                          <i class="fa fa-twitter"></i>
                                        </a>
                                      </li>
                                      <li>
                                        <a class="f" href="#">
                                          <i class="fa fa-facebook"></i>
                                        </a>
                                      </li>
                                    </ul>
                                  </div>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="col-sm-12 padding0">
                  <div class="col-sm-5 col-sm-4-ty-col padding0">
                    <div class="pro_description">
                      <p class="parag">
                        <del>र</del>&nbsp;&nbsp;24,990
                      </p>
                      <h2>
                                                                                                            <del>र</del>&nbsp;&nbsp;23,990
                                                                                                        </h2>
                      <p class="taxes">Inclusive of all taxes</p>
                      <p class="offers-txt">Special Offers: Extra 10:% Off</p>
                      <br>
                      <div class="add-to-chart-btn">
                        <input class="btn btn-default update" type="button" value="Add to Cart" id="chart">
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-7 col-sm-8-pdp" style="padding-right: 0px;">
                    <div class="cart_quantity_button qtn">
                      <a class="cart_quantity_up" href=""> + </a>
                      <p class="pra">Qty :&nbsp;</p>
                      <input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
                      <a class="cart_quantity_down" href=""> - </a>
                    </div>
                  </div>
                </div>
                <div class=" padding0 mrg-top10">
                  <div class="pull-left mrg-top10">
                    <label>
                      <input type="checkbox" name="sport[]" value="deposit">Add to Compare

                    </label>
                  </div>
                  <div class="pull-left mrg-top10">
                    <ul class="lst-pro">
                      <li>
                        <a href="">View Full Product</a>
                      </li>
                      <span>|</span>
                      <li>
                        <a href="">Shipping Details</a>
                      </li>
                      <span>|</span>
                      <li>
                        <a href="">Specs</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <label>
            <input type="checkbox" name="sport[]" value="deposit">Add to Compare

          </label>
          <br/>
        </div>
      </div>
    </a>
  </div>
</div>
&#13;
&#13;
&#13;

另见直接链接供您参考: -

Demo link

步骤检查: -

  1. 将鼠标悬停在 LED&amp; amp;&amp;液晶显示器这里会发生什么另一个div会来。有一个名为快速信息的按钮,它有一个链接,它会进入相应的页面。但除此之外,当我点击时,我还在<a>标签上给出了一个链接。这是行不通的。
  2. 我想要这样做。请帮忙

2 个答案:

答案 0 :(得分:0)

如何在相关标签上使用z-index属性?它们的堆叠顺序可能会阻止<a>工作。

答案 1 :(得分:0)

问题出现是因为“product-overlay”onclick上有div。您需要做的是,当用户点击label标记时,停止事件的传播,使其不执行产品叠加的onclick。

为此,只需在处理event.stopPropagation();点击事件的事件的开头/结尾添加label

如果您想在不更改任何代码的情况下快速查看它的工作原理:

  1. 转到demo link
  2. 打开JavaScript控制台。
  3. 执行以下代码:

    $(".overlay-content label").on("click", function() { event.stopPropagation(); });

  4. 现在,您可以点击“添加到比较”label,而无需在任何地方重定向。

  5. (请注意,在您停止活动传播时不会选中该复选框,您需要在处理stopPropagation点击的任何地方添加label来电