CSS塊鏈接和圖像

鑑於這個網站：CSS塊鏈接和圖像

<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>

整個<div class="nation">以下CSS結果成爲一個可點擊的塊鏈接：

.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等）仍然是一個塊鏈接。

我很困惑。

來源

2010-03-16 Drew

DEMO：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--*/ 
    }

來源

2010-03-16 14:33:26

一個奇妙的詳細答案，謝謝！ – Drew 2010-03-16 21:53:33

歡迎兄弟！ ;-) – 2010-03-16 22:08:30

我不會用像嵌套標籤這樣的內聯元素包裝塊元素。把一個位置的改變函數的調用直接進入可點擊圖像，甚至做內聯，如下面的基本的例子：

<img src="nations/America.png" alt="snip" 
    onclick="javascript:location.href='library.php?type=nation&amp;id=America'" />

然後靜靜地飄浮你的形象，只要你喜歡。

來源

2010-03-16 13:58:43 Robusto

我會去儘可能的onclick移動到第一個div，因爲OP希望整個事情都是可點擊的。顯示不顯眼的選項也不錯！ – 2010-03-16 14:03:43

這是無效的HTML嘗試：

<div class="nation"> 
    <h3><a href="library.php?type=nation&amp;id=America" class="nation-flag" id="usa"> 
     America 
    </a></h3> 
</div>

然後，您可以有一個泛型類的所有標誌。然後是#usa的具體內容並將該標誌作爲背景圖像應用。使用CSS你可以將href顯示爲一個塊，並使其儘可能大。

來源

2010-03-16 14:04:25 matpol

改爲使用div.nation作爲a.nation。將「display：block」添加到它以使其影響整個父div。

來源

2010-03-16 14:07:41 Tom

CSS塊鏈接和圖像

回答

相關問題