html - css block 链接和图像

Question

给定这个 html:

<div class="nation">
    <a href="library.php?type=nation&amp;id=America">
        <div class="nation-image">
            <img src="nations/America.png" alt="snip" />
        </div>
        <h3>America</h3>
    </a>
</div>

以下 CSS 生成整个 <div class="nation">成为可点击的 block 链接:

.nation {float: left; text-align: center; width: 189px;}

.nation img {width: 160px; margin: 10px 0 0 0; border: 1px solid #16160C;}

但如果我进行以下单个添加:

.nation {float: left; text-align: center; width: 189px;}

    .nation-image {height: 138px;}

.nation img {width: 160px; margin: 10px 0 0 0; border: 1px solid #16160C;}

指定<div class="nation-image">的高度然后图像(并且只有图像)不再是链接，但 div 的其余部分(它周围的边距，h3 等)仍然是 block 链接。

我很困惑。

Answer 1

演示: http://jsbin.com/uyupu/2

您的 HTML 结构必须是这样的:

<div class="nation">
<a href="#">
    <img src="your.jpg" alt="Daim Graffiti" id="usa" />
    <span class="nation-flag">America</span>
</a>
</div>

然后是你的 CSS:

    .nation {
      margin: 0;
      overflow: hidden;
      float: left;
      position: relative;
    }
    .nation a {
      text-decoration: none;
      float: left;
    }
    .nation a:hover {
      cursor: pointer;
    }

    .nation a img {
      float: left;
      margin: 0;
      border: none;
      padding: 10px;
      background: #fff;
      border: 1px solid #ddd;

/* note that you don't really need to set the Height 
but the width so the image auto scaling fine!*/

      width:200px
    }

    .nation a .nation-flag {
      position: absolute;
      right: 20px;
      bottom: 20px;
      font-size: 1.2em;
      color: #fff;
      background: #000;
      padding: 5px 10px;
      filter:alpha(opacity=65);
      opacity:.65;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 
    /*--IE 8 Transparency--*/
    }