在沒有javascript的情況下懸停更改圖像（使用asp.net-mvc3）

我想製作一個包含圖像和標題的菜單。在懸停圖像或標題時，我想更改標題的顏色和圖像。在沒有javascript的情況下懸停更改圖像（使用asp.net-mvc3）

這很容易。

的問題是：

圖像僅具有固定的高度，寬度變化，並且這些元件來從數據庫中，所以我不能硬編碼它們的寬度。我不會將圖像的寬度和高度存儲在數據庫中，但如果沒有其他解決方案，我可以這樣做。

我不想在懸停時加載新圖像，因爲如果第一次懸停並且替換圖像尚未加載，我不希望它消失。我寧願搞亂背景位置。另外，背景位置在舊IE瀏覽器中奇怪地工作（他們瞭解background-position-x，y不僅僅是背景位置），處理這個問題的最佳做法是什麼？

的CSS是一個靜態文件，所以一切動態（使用變量）應該是內聯（如div的背景URL來自數據庫）

的形象應該是點擊就像標題。基本上，鏈接區域應該是一樣的懸停區域（這意味着我寧願寫：在CSS懸停）

我寧願不使用這個JavaScript（它應該是不可能完成的）

我的代碼現在有點亂，因爲我嘗試了多種方法，有些東西混淆了。

<div class="headericons_wrap"> 
    @foreach (var headericon in Model) 
    { 
    <div class="headericon"> 
     <div class="headericon_image"> 
      <a href="@Url.Content(headericon.LinkURL)"> 
       <span style="background-image:url(@Url.Content(headericon.PictureURL));"></span> 
      </a> 
     </div> 
     <div> 
       @headericon.Name 
     </div> 
    </div> 
    } 
</div>

和

.headericons_wrap{ 
    float: right; max-height: 110px; 
} 
.headericons_wrap a img 
{ 
    border-style: none; 

} 
.headericon{ 
    text-align:center; 
    float:left; 
    margin:0 8px; 
    max-width:96px; 
    overflow: hidden; 
} 

.headericon_image 
{ 
    height: 80px; 
    width: auto; 
} 

.headericon_image span 
{ 
    cursor: pointer; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    background: none no-repeat scroll 0 0 transparent; 
} 

.headericon_image a:hover span 
{ 
    background-position: 0 100%; 
} 

.headericon_image a 
{ 
    background-position: 0 0; 
    display: block; 
    height: 100%; 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
}

當前不工作，因爲它不關心圖像的寬度，只是標題長度，所以它減少了圖像的右側的CSS，並且還標題上沒有鏈接，但應該有。

帶1-2個元素的jsfiddle會是最好的。

來源

2011-05-25 SoonDead

您的圖片網址是否可變？如果沒有，你可以簡單地做：在不同的網址上懸停在headericon上。

我見過（和使用過）的另一個想法是從兩個或三個（您的案例中兩個）中創建一個圖像，其中圖像堆疊在另一個之上。然後，使用CSS：懸停，圖像的x，y座標發生變化，從而向上或向下「移動」圖像以顯示其他圖像。這個'組合'的圖像可以在PHP中或asp中快速創建，而不會太麻煩。

來源

2011-05-25 13:18:56 Patrick

如果您閱讀我的代碼，您可以看到我正在使用.headericon_image a：hover span { background-position：0 100％; } 所以圖像已經是一個後臺移位的div。 – SoonDead 2011-05-25 13:32:19

您可以動態創建CSS類以使用每個標題（常規版本和帶有懸停選擇器的一個）。這可以在樣式標籤內的文件頭標籤部分完成，或者您可以使用此信息動態生成CSS文件（我知道您不想這樣做，但它可能使事情變得更簡單）。

來源

2011-05-25 13:23:45 patorjk

我沒有看到生成css類內聯或寫一個內聯樣式=「」屬性與我會寫在CSS類的東西之間的差異。生成外部css並不是很好的緩存方式，因爲瀏覽器傾向於非常積極地緩存css。 – SoonDead 2011-05-25 13:38:23

在沒有javascript的情況下懸停更改圖像（使用asp.net-mvc3）

回答

相關問題