基本上，
我有一个无效的情景。让我解释一下。
我有一个div，其中另一个div来了，之前的div进入后台。现在这里发生的是，
悬停后出现的div包含一个按钮。按钮上有链接，可以重定向到另一个页面。还有那个div。我有一个<a>标记，它也有一个链接，但点击它就不起作用。
当我删除按钮时它可以工作，但我也想要按钮。
请参阅代码供您参考： - 如果您还有其他需要，请告诉我
<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>र</del> 13,999
</p>
<h2>
<del>र</del> 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> 24,990
</p>
<h2>
<del>र</del> 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 : </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>
另见直接链接供您参考： -
步骤检查： -
<a>标签上给出了一个链接。这是行不通的。我想要这样做。请帮忙
答案 0 :(得分：0)
如何在相关标签上使用z-index属性？它们的堆叠顺序可能会阻止<a>工作。
答案 1 :(得分：0)
问题出现是因为“product-overlay”onclick上有div。您需要做的是，当用户点击label标记时，停止事件的传播，使其不执行产品叠加的onclick。
为此，只需在处理event.stopPropagation();点击事件的事件的开头/结尾添加label。
如果您想在不更改任何代码的情况下快速查看它的工作原理：
执行以下代码：
$(".overlay-content label").on("click", function() { event.stopPropagation(); });
现在，您可以点击“添加到比较”label，而无需在任何地方重定向。
（请注意，在您停止活动传播时不会选中该复选框，您需要在处理stopPropagation点击的任何地方添加label来电