javascript - 悬停在 div 上时,<a> 标记不会转到链接

标签 javascript jquery html css

基本上,

我有一个不工作的场景。让我解释一下。

我有一个 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>&#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>

另请参阅直接链接供您引用:-

Demo link

检查步骤:-

  1. 将鼠标悬停在 LED 和 LCD 下的第一部分 此处会发生另一个 div。有一个名称为 Quick Info 的按钮,它有一个链接,它转到相应的页面。但除此之外,当我点击时,我还在 <a> 上提供了一个链接。标签。这是行不通的。

我希望它能工作。请帮忙

最佳答案

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

关于javascript - 悬停在 div 上时,<a> 标记不会转到链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27861109/

相关文章:

javascript - jQuery 参数序列化,没有括号困惑

javascript - 如何使用图像作为提交按钮,将其自身提交到服务器?

html - Bootstrap 将表单固定到页面底部

javascript - 如何通过 css 或 javascript 甚至使用 jquery 在 html 中扩展悬停的缩写词?

javascript - Ember.js - 没有处理任何 Action

javascript - 设置来自Ajax的自定义HTML5字段验证消息

javascript - 如何使用javascript调用路由并发送数据

javascript - 需要帮助修复我的 isotope.js [jquery 和 html 代码]

javascript:鼠标悬停用于背景着色和不透明度

javascript - jQuery - 选择更改事件会导致选择框在 IE10 和 FF 中立即再次关闭