Question

<div class="gallery-cell">
  <div class="highslide-gallery">
    <a id="thumb2" href="imgs/SteakHouse/1.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'steak-caption', slideshowGroup:2 } )">
      <div id="txt">
        <h4><b>STEAK HOUSE<br>RESTAURANT</b></h4>
        <br>
        <!--- Delete this after adding Address --->
        <p class="address">
          <!-- Address -->
        </p>
        <p class="city">Jeddah</p>
      </div>
    </a>
    <div class="hidden-container">
      <a href="imgs/SteakHouse/2.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'steak-caption', thumbnailId: 'thumb2', slideshowGroup:2 })"></a>
      <a href="imgs/SteakHouse/3.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'steak-caption', thumbnailId: 'thumb2', slideshowGroup:2 })"></a>
      <a href="imgs/SteakHouse/4.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'steak-caption', thumbnailId: 'thumb2', slideshowGroup:2 })"></a>
      <a href="imgs/SteakHouse/5.jpg" class="highslide" onclick="return hs.expand(this, { captionId: 'steak-caption', thumbnailId: 'thumb2', slideshowGroup:2 })"></a>
    </div>
    <div class="highslide-caption" id="steak-caption">
      Name:
      <br><b>Steak House Restaurant</b>
      <br> Location:
      <br><b>Jeddah</b>
      <br>
      <!--Total Built Area:<br><b>495 M<sup>2</sup>/Unit</b>  <br>-->
      <!--Lot Area:<br><b>352 M<sup>2</sup>/Lot</b>           <br>-->
      <!--Year:<br><b>2012</b>                                <br><br>-->
    </div>
  </div>
</div>

The <a> element is the parent of the class "txt" and when I try to make <a> the parent of the entire "gallery-cell" class it doesn't work! I want the entire cell to be clickable, not just the text.

If you want, take a look at this website to test it out: http://urbanphenomena.net/

Answer 1

实际上，在锚标签内添加div是一种错误的方法。

因此，您可以将锚标记添加为“gallery-cell”div

的第一个子标记

background-image:url("../images/cover.png")

然后给出相对于“gallery-cell”的位置，并将绝对位置设置为标签。您可以使用以下样式

<div class="gallery-cell">
    <a id="thumb2" href="imgs/SteakHouse/1.jpg" class="highslide"></a>
    <div class="highslide-gallery">
    </div>
</div>

通过这个，您可以使整个单元格可点击

Answer 2

由于元素默认为内联，div为块，因此您需要将元素定义为块。（内联元素中的块元素无效）

Answer 3

添加此CSS

.highslide-gallery {
    height: 100%;
    width: 100%;
}
.highslide {
    display: block;
    height: 100%;
    outline: medium none;
    width: 100%;
}

<a> link is not working on the div

3 个答案: