Блог

Возникает какая-то глупая проблема, из-за которой мое HTML-изображение не будет ссылаться на страницу и не отображается как интерактивное. У меня есть корзина и значок корзины, который отображает количество товаров в корзине. Изображение включено в CSS. Я попытался настроить z-index все до конца, но ничего не произошло. Не уверен, что я упускаю что-то очевидное. Довольно новичок в этом, поэтому любая помощь приветствуется! Ниже приведен мой код:

 .cart {
  background-color: #E55F5F;
  background-image: url(images/shoppingcart.png);
  background-size: contain;
  color: white;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  margin-top: -20px;
  border-radius: 50%;
  position: fixed;
  z-index: 1000;
  overflow: hidden;
}  

 <li>
  <div class="cart">
    <a href="/homework_6/cart.html"></a>
  </div>
  <div id="quantityCount">0</div>
</li>  

Ссылка по умолчанию является встроенным элементом и — не имея содержимого — занимает очень мало места внутри своего контейнера (если таковой имеется). Чтобы изменить это, сделайте его блочным элементом с полным размером его контейнера:

 .cart a {
 display: block;
 width: 100%;
 height: 100%;
}
  

Ваш тег не имеет никакого значения, поэтому его можно сделать интерактивным.

Вы можете использовать его, как показано ниже:

 <li>
   <div class="cart"><a href="/homework_6/cart.html">cart</a></div>
   < id="quantityCount">0</div>
</li>
  

В противном случае, если вы хотите показать количество как доступное

 <li>
   <div class="cart"><a href="/homework_6/cart.html"><span id="quantityCount">0</span></a></div>
</li>
  

Попробуйте эти коды:

 background-image: url(../images/shoppingcart.png);
  

убедитесь, что тег привязки внутри карточки имеет одинаковую ширину и высоту

 .cart {
  background-color: #E55F5F;
  background-image: url(images/shoppingcart.png);
  background-size: contain;
  color: white;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  margin-top: -20px;
  border-radius: 50%;
  position: fixed;
  z-index: 1000;
  overflow: hidden;
  position: relative;
}

.cart a{
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%
   z-index: 10;
}
  

сделайте свой <a> тег родительским <div class="cart"> тегом тега. в противном случае ваш код работает нормально для меня. возможно, путь к вашему изображению неверен? я заменил ваш путь к изображению размещенным изображением, и все работало нормально

Это фундаментальная проблема. Вы добавили ссылку, но без содержимого (ничего между тегами). Из-за этого ссылка также не содержит ничего, что будет показано, и поэтому не занимает места. Из-за этого вы не можете щелкнуть по нему.

Правильная структура для этого заключается в том, чтобы поместить div между тегом и всем div будет кнопкой для ссылки.

 .cart {
  background-color: #E55F5F;
  background-image: url(images/shoppingcart.png);
  background-size: contain;
  color: white;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  margin-top: -20px;
  border-radius: 50%;
  position: fixed;
  z-index: 1000;
  overflow: hidden;
}  

 <li>
  <a href="/homework_6/cart.html">
    <div class="cart">
      <id="quantityCount">0</div>
    </div>
  </a>
</li>  

Оберните ссылку (тег href) вокруг вашего значка. Посмотрите на этот пример, где я использовал значок корзины Font-Awesome. смотрите весь код здесь: https://codepen.io/susanwinters/pen/qBNYdBG

  <h1>Shopping Cart Icon</h1>

 <p>Go ahead and click the shopping cart icon: 
   <a href="https://teespring.com/stores/campsitecoders" target="_blank" />
   <i class="fa fa-shopping-cart fa-3x"></i><span>5</span>
  </a></p>