控制懸停區域和CSS圖像精靈

使用CSS圖像精靈，我創建了一個「交互式」圖像，在某些區域懸停時會更改部分圖像。所有的工作都很好，但一旦你在懸停區域之後能夠控制懸停的區域，就會很困難。控制懸停區域和CSS圖像精靈

例如，假設主區域爲400x400像素，懸停區域距離左上角爲100x100。當你進入懸停區時，要顯示的'新'圖像是200x200。這會出現，但這個'新'200x200圖像變得活躍;然後，我可以在這個新圖像中的任何位置移動（比如說150x150），懸停圖像仍然存在，即使現在我已經離開了100x100原始懸停區域。有沒有什麼辦法來限制這種情況，即使顯示200x200的懸停圖像，活動區域始終爲100x100？

我（切下）CSS（areaTest.css）是：

#bigArea { 
    width: 400px; 
    height: 400px; 
    background: url(areaImage.jpg) no-repeat; 
    margin: 10px auto; padding: 0; 
    position: relative; 
} 

#bigArea li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: block; 
    position: absolute; 
} 
#bigArea a { 
    display: block; 
    text-indent: -9999px; 
    text-decoration: none; 
} 

#littleArea { 
    width: 100px; 
    height: 100px; 
} 
#littleArea a { 
    width: 100px; 
    height: 100px; 
} 
#littleArea a:hover { 
    width: 200px; 
    height: 200px; 
    background: url(areaImage.jpg) 0px -410px no-repeat; 
}

，我的HTML是：

<link href="areaTest.css" rel="stylesheet" type="text/css"> 
<div> 
    <ul id="bigArea"> 
     <li id="littleArea"><a href="#"></a></li> 
    </ul> 
</div>

任何幫助將非常感激。

感謝，果醬

來源

2012-07-02 Jam

我分叉Kyomu的溶液並施加相反：http://jsfiddle.net/FEkcx/

的<a>是一個空的塊即在<div>實際上具有背景圖像的頂部。懸停使用#littleArea a:hover + div觸發。

來源

2012-07-02 16:20:05 Jen

謝謝仁 - 我使用+選擇器來減少代碼，如你所建議的。 – Jam

嗯，我有一個解決。「掩蓋」你不想讓它觸發的部分（例如：帶有空白的div）。通過這樣做，它將不再懸停在對象上。

Example

我覺得可能是使用selectors（如+）更好的方式，但這個工程。

來源

2012-07-02 15:15:24 Fewfre

感謝您指向我Kyomu正確的方向。 – Jam

控制懸停區域和CSS圖像精靈

回答

相關問題