基本上,
我有一个不工作的场景。让我解释一下。
我有一个 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>
另请参阅直接链接供您引用:-
检查步骤:-
- 将鼠标悬停在 LED 和 LCD 下的第一部分 此处会发生另一个 div。有一个名称为 Quick Info 的按钮,它有一个链接,它转到相应的页面。但除此之外,当我点击时,我还在
<a>
上提供了一个链接。标签。这是行不通的。
我希望它能工作。请帮忙
最佳答案
在相关标签上使用 z-index 属性怎么样?它们堆叠的顺序可能会阻止 <a>
从工作。
关于javascript - 悬停在 div 上时,<a> 标记不会转到链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27861109/