連接盒子問題

Question

我想懸停一個鏈接（<a>標籤，其中包含一個<div>標籤），所以顏色變成紅色但只有當我懸停黃色的領域！我的問題是，如果光標不在黃色字段上，也可以將其懸停。

我知道我可以把一個標籤放入div標籤，但我想鏈接整個盒子而不僅僅是文本。

我也試過使用a { width: 100px; }但這當然不起作用。

https://jsfiddle.net/3phy4950/

任何想法我怎麼能解決這個問題？

Answer 1

它不與寬度工作，因爲你申請這種風格的標籤。但是標籤默認顯示爲內聯，這意味着它們不佔用整個空間/行。

默認情況下，div標籤是顯示塊，這意味着它將佔用整個空間/行。

你需要做的是顯示風格從a div更改爲內聯：

a div { 
    display: inline; 
} 

見Fiddle

Answer 2

使用inline-block作爲<a>標籤的顯示格式。

a { 
    width: 100px; 
    display: inline-block; 
} 

你updated fiddle

Answer 3

這個怎麼樣：

<div class="btn" onclick="location.href='http://google.com'">» Hover Me</div> 

而CSS：

.btn { 
    background-color: yellow; 
    width: 100px; 
} 

.btn:hover { 
    color: red; 
}