jquery - 如何解决在我的模板中打开页面的问题？

Question

我希望当我单击一本书的图像时，可以看到该书的详细信息页面。

我将 href 设置<a class="more-seeBook">为 detailsbook.html。

但是因为<div class="overlayImage">具有绝对位置，当我将鼠标悬停在 上时<div class="overlayImage">，<a>不会打开。

我该如何解决？

.special-sug {
  width: 185px;
  margin: 0 auto 20px;
  max-width: 100%;
}

.special-sug .container-img {
  width: 97%;
  overflow: hidden;
  position: relative;
  display: inline-block;
  height: 230px;
  margin: 0 auto;
  margin-bottom: 5px;
}

.special-sug .more-seeBook {
  display: block;
  width: 100%;
  height: 100%;
}

.special-sug .container-img img {
  width: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.overlayImage {
  background: rgba(56, 171, 236, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  cursor: pointer;
}

.overlayImage div {
  margin: 30px auto;
  transform: translateY(180px);
  transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -ms-transition: transform 0.5s;
  -o-transition: transform 0.5s;
}

.special-sug .container-img:hover .overlayImage {
  opacity: 1;
}

.special-sug .container-img:hover .overlayImage div,
.special-sug .container-img:hover .overlayImage .slideView {
  transform: translateY(30px);
}

.special-sug .container-img:hover .overlayImage .slideView2 {
  transition-delay: 1.5s;
  transition: transform 1.5s;
  -webkit-transition: transform 1.5s;
  -moz-transition: transform 1.5s;
  -ms-transition: transform 1.5s;
  -o-transition: transform 1.5s;
}

.special-sug .container-img:hover .overlayImage .slideView3 {
  transition-delay: 0.85s;
  transition: transform 0.85s;
  -webkit-transition: transform 0.85s;
  -moz-transition: transform 0.85s;
  -ms-transition: transform 0.85s;
  -o-transition: transform 0.85s;
}

.special-sug h3 {
  margin: 0;
  margin-bottom: 8px;
  font-size: 14px;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.special-sug h3 a {
  color: #42444C;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<div class="newitem">
  <figure class="text-center special-sug">
    <div class="container-img">
      <a href="detailsbook.html" class="more-seeBook">
        <img src="https://vignette.wikia.nocookie.net/disney/images/3/34/Finding_Dory_Book_11.jpg/revision/latest?cb=20160204220846" class="img-responsive" alt="" />
      </a>
      <div class="overlayImage">
        <div class="text-center">
          <a href="#" class="slideView slideView2 tooltipButton" data-placement="top" title=""><i class="fa fa-heart-o"></i> </a>
          <a href="#" class="slideView slideView3 tooltipButton" data-placement="top" title=""><i class="fa fa-search-plus"></i> </a>
        </div>
      </div>
    </div>
    <figcaption>
      <h3><a href="#" target="_blank" title="">book1</a></h3>
    </figcaption>
  </figure>
  <a href="#" title="" class="shopping_btn addToBastket">
    <span class="cart_text">addbasket</span>
  </a>
</div>

标签： jqueryhtmltwitter-bootstrapcss

Answer 1

您可以在overlayImage 类上使用onClick 重定向页面，因为您在overlayImage 下使用了其他锚点

.special-sug {
  width: 185px;
  margin: 0 auto 20px;
  max-width: 100%;
}

.special-sug .container-img {
  width: 97%;
  overflow: hidden;
  position: relative;
  display: inline-block;
  height: 230px;
  margin: 0 auto;
  margin-bottom: 5px;
}

.special-sug .more-seeBook {
  display: block;
  width: 100%;
  height: 100%;
}

.special-sug .container-img img {
  width: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.overlayImage {
  background: rgba(56, 171, 236, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  cursor: pointer;
}

.overlayImage div {
  margin: 30px auto;
  transform: translateY(180px);
  transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  -ms-transition: transform 0.5s;
  -o-transition: transform 0.5s;
}

.special-sug .container-img:hover .overlayImage {
  opacity: 1;
}

.special-sug .container-img:hover .overlayImage div,
.special-sug .container-img:hover .overlayImage .slideView {
  transform: translateY(30px);
}

.special-sug .container-img:hover .overlayImage .slideView2 {
  transition-delay: 1.5s;
  transition: transform 1.5s;
  -webkit-transition: transform 1.5s;
  -moz-transition: transform 1.5s;
  -ms-transition: transform 1.5s;
  -o-transition: transform 1.5s;
}

.special-sug .container-img:hover .overlayImage .slideView3 {
  transition-delay: 0.85s;
  transition: transform 0.85s;
  -webkit-transition: transform 0.85s;
  -moz-transition: transform 0.85s;
  -ms-transition: transform 0.85s;
  -o-transition: transform 0.85s;
}

.special-sug h3 {
  margin: 0;
  margin-bottom: 8px;
  font-size: 14px;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.special-sug h3 a {
  color: #42444C;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<div class="newitem">
  <figure class="text-center special-sug">
    <div class="container-img">
      <a href="detailsbook.html" class="more-seeBook">
        <img src="https://vignette.wikia.nocookie.net/disney/images/3/34/Finding_Dory_Book_11.jpg/revision/latest?cb=20160204220846" class="img-responsive" alt="" />
      </a>
      <div class="overlayImage" onClick="window.location.assign('detailsbook.html')">
        <div class="text-center">
          <a href="#" class="slideView slideView2 tooltipButton" data-placement="top" title=""><i class="fa fa-heart-o"></i> </a>
          <a href="#" class="slideView slideView3 tooltipButton" data-placement="top" title=""><i class="fa fa-search-plus"></i> </a>
        </div>
      </div>
    </div>
    <figcaption>
      <h3><a href="#" target="_blank" title="">book1</a></h3>
    </figcaption>
  </figure>
  <a href="#" title="" class="shopping_btn addToBastket">
    <span class="cart_text">addbasket</span>
  </a>
</div>