Сделать поле не кликабельным

Question

Я очень новичок в css, обычно я могу разобраться с помощью проб и ошибок, но это меня озадачило. Я использую спрайт-страницу, чтобы показать категории на моей домашней странице.

HTML-код

<div id="sprite2">
    <a style="display:inline-block" href="https://www.subscriptionboxaustralia.com/product-category/adults-sex-toy-subscription-boxes/"><div class="sprite2" id="adults-boxes"></div></a>
    <a style="display:inline-block" href="https://www.subscriptionboxaustralia.com/product-category/arts-crafts-creative-subscription-boxes/"><div class="sprite2" id="arts-boxes"></div></a>
    </div>

И CSS

    .sprite2 {
    background-image: url(https://www.subscriptionboxaustralia.com/wp-content/themes/accesspress-store/images/Subscription-categories-spritesheet.png);
    background-repeat: no-repeat;
display:inline-block;

}

#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    margin-left: 120px
    }


#arts-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -94px;   
    margin-left: 70px
}

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

www.subscriptionboxaustralia.com

** ОБНОВЛЕНИЕ Первый ответ идеально подходит для dekstop, большое спасибо !!!! Единственная проблема в том, что теперь он сбрасывает мой мобильный стиль.

@media (max-width: 480px) {
#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    transform: scale(.8);
    margin-left: -33px;}}

@media (min-width: 481px) {
#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;}}

Я использовал это, чтобы уменьшить изображение для мобильного телефона, и изображение почему-то сидело вправо, поэтому я использовал -33px, чтобыон сидит на левом краю, теперь его снова толкнули вправо? какие-либо идеи о мудрый CSS йоды? =) * * 1016

Answer 1

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

Теперь, прежде чем мы решим вашу проблему, кликабельные части - это часть <a>, поэтому она кликабельна, я думаю, что div - это та, которую вы хотите щелкнуть, в этом случае вы либодолжен уменьшить <a> высоту или увеличить <div> высоту.

На самом деле это работает так:

с <a style="display:inline-block"

до <a style="display:inline-block; height:0"

Answer 2

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

<div id="sprite2">
    <div class="sprite2" id="adults-boxes">
         <a style="width:424px; height: 49px; display:inline-block" href="#"></a>
    </div>
    <div class="sprite2" id="arts-boxes">
         <a style="width:424px; height: 49px; display:inline-block" href=""></a>
    </div>
</div>

.sprite2 {
    background-image: url(https://www.elegantthemes.com/blog/wp-content/uploads/2015/02/custom-trackable-short-url-feature.png);
    background-repeat: no-repeat;
display:inline-block;

}

#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    margin-left: 120px
    }


#arts-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -94px;   
    -margin-left: 70px
}

<div id="sprite2">
    <div class="sprite2" id="adults-boxes">
         <a style="height:49px; width:424px; display:inline-block" href="#"></a>
    </div>
    <div class="sprite2" id="arts-boxes">
         <a style="height:49px; width:424px; display:inline-block" href=""></a>
    </div>
</div>

Answer 3

Вы применяете поле для полей внутри тегов a. Так что это расширит содержимое тега a, сделав таким образом поле кликабельным. Решением этой проблемы было бы переместить margin-left: 70px в селектор класса a:

.sprite2 {
  background-image: url(https://www.subscriptionboxaustralia.com/wp-content/themes/accesspress-store/images/Subscription-categories-spritesheet.png);
  background-repeat: no-repeat;
  display:inline-block;
}

.sprite-link-adults {
  margin-left: 120px;
}

.sprite-link-arts {
  margin-left: 70px;
}

#adults-boxes {
  width: 425px;
  height: 49px;
  background-position: -15px -15px;
}


#arts-boxes {
  width: 425px;
  height: 49px;
  background-position: -15px -94px;
}

<div id="sprite2">
  <a class="sprite-link-adults" href="https://www.subscriptionboxaustralia.com/product-category/adults-sex-toy-subscription-boxes/">
    <div class="sprite2" id="adults-boxes"></div>
  </a>
  <a class="sprite-link-arts" href="https://www.subscriptionboxaustralia.com/product-category/arts-crafts-creative-subscription-boxes/">
    <div class="sprite2" id="arts-boxes"></div>
  </a>
</div>

Answer 4

Я думаю, что проблема заключается в вашем изображении в качестве фона. Изображение не загружается для меня, поэтому я не вижу его, но, возможно, оно может перекрываться. Я изменил изображение на цвет фона, и поле, хотя и очень маленькое, не кликабельно. Примечание: я не изменил разметку.

[Codepen][1]

Answer 5

Вы указали поле для дочернего элемента sprite2 вместо того, чтобы предоставить поле для тега a, которое даст вам поле, но не будет активным. Проверьте фрагмент.

    .sprite2 {
    background-image: url(https://www.subscriptionboxaustralia.com/wp-content/themes/accesspress-store/images/Subscription-categories-spritesheet.png);
    background-repeat: no-repeat;
display:inline-block;

}

#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    }


#arts-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -94px;   
}

<div id="sprite2">
    <a style="display:inline-block; margin-left: 120px" href="https://www.subscriptionboxaustralia.com/product-category/adults-sex-toy-subscription-boxes/"><div class="sprite2" id="adults-boxes"></div></a>
    <a style="display:inline-block; margin-left: 70px;
" href="https://www.subscriptionboxaustralia.com/product-category/arts-crafts-creative-subscription-boxes/"><div class="sprite2" id="arts-boxes"></div></a>
    </div>