Question

我正在尝试在image布局中制作背景clickable Tumblr，但由于某种原因它没有这样做。一切都会出现，但图片不可点击。

HTML

<div class="image-swap-auto">
  <a id="auto-link" href="http://steamologist.com/auto_detailing"></a>
</div>

CSS

.image-swap-auto {
   position: relative;
   background-image: url(http://i174.photobucket.com/albums/w101/shakadoodoo/steamology_services_table_auto_long_zpslpwwv17n.jpg);
   background-repeat: no-repeat; 
   display:block;
   height: 210px;
   width: 210px;
}

#auto-link {
   position: absolute; 
   width: 210px;
   height: 210px;
   background-color: transparent; 
}

.image-swap-auto:hover {
background-position: 0 100%;
}

以下是我要修复的网页的网址.....

http://steamologist.com/auto_detailing

Answer 1

欢迎来到SO。

只需将div放入a nchor。

.image-swap-auto {
   background-image: url(http://i174.photobucket.com/albums/w101/shakadoodoo/steamology_services_table_auto_long_zpslpwwv17n.jpg);
   background-repeat: no-repeat; 
   display:block;
   height: 210px;
   width: 210px;
}

#auto-link { 
}

.image-swap-auto:hover {
  background-position: 0 100%;
}

<a id="auto-link" href="http://steamologist.com/auto_detailing">
  <div class="image-swap-auto"></div>
</a>

或者如果你想修补，这是一个相关的Codepen

希望这有帮助，祝周末愉快！

Answer 2

您需要将图像放在锚标记中，因为它可以点击而不是div：

<div>
  <a id="auto-link" href="http://steamologist.com/auto_detailing">
     <span class="image-swap-auto">
     </span>
  </a>
</div>

使用tumblr布局中的css和html制作图像可点击链接

2 个答案: