0

Здравствуйте! Я пытаюсь сделать картинку на которой текст кликабельной, но она не кликабельна, кликабельна только ссылка в ней (Новые товары и подробнее). Делал<a href="/newproducts"> перед тэгом <div class="col-sm-3 homeBanner">, все равно элемент картинки целиком не кликабелен.

<div class="col-sm-3 homeBanner">
   <div class="row">
      <a href="/newproducts">
         <img class="bgImage" src="/Content/Images/uploaded/homebanner-1.png" alt="" width="293" height="180" />
      </a>
      <div class="row m0 bannerTextArea">
         <div class="row m0 bannerTextAreaInner">
            <h4>Новые товары</h4>
            <h5><a href="/newproducts">подробнее</a></h5>
         </div>
      </div> 
   </div>           
</div>

введите сюда описание изображения

1
  • Можно увидеть CSS кода?
    – Yuri
    24 дек 2016 в 10:02

1 ответ 1

0

Вариант 1 - pointer-events: none; - Сan I use

.b,
.b-pict {
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.b-text {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  transition: 0.3s;
  pointer-events: none;
}
.b:hover .b-text {
  opacity: 1;
}
<div class="b">
  <a href="https://www.google.com.ru" class="b-pict">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTXg1oZXhnADWrRUFJnyfaVdR1RI0yNEQSv4pp81lUyKEajafJQ" alt="">
  </a>
  <div class="b-text">
    text
  </div>
</div>

2 вариант - использовать тег a для всего блока

<a href="/newproducts">
  <img class="bgImage" src="/Content/Images/uploaded/homebanner-1.png" alt="" width="293" height="180" />
  <div class="b-text">
    <h4>Новые товары</h4>
    <h5>подробнее</h5>
  </div>
</a>
3
  • Он написал, что он пробовал второй и почему то не сработало
    – Yuri
    24 дек 2016 в 10:23
  • в tag 'a' не должно быть вложенного тега 'a'
    – soledar10
    24 дек 2016 в 10:25
  • Я это знаю. Он написал, что переставлял ссылку за <div class="col-sm-3 homeBanner"> и не работало
    – Yuri
    24 дек 2016 в 10:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.