как я могу решить проблему открытия страницы в моем шаблоне? - PullRequest
Новая
       1

как я могу решить проблему открытия страницы в моем шаблоне?

0 голосов
/ 07 декабря 2018

Я хочу, чтобы при нажатии на изображение книги была открыта страница с подробными сведениями о книге.

Я установил 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>

1 Ответ

0 голосов
/ 07 декабря 2018

Вы можете перенаправить страницу с помощью onClick на класс overlayImage, потому что вы используете какой-то другой якорь под 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...