只有一幅圖像懸停效果的圖像菜單？

我已經建立了一個網站TYPO3（4.7.2），它有一個很好的圖形菜單在右側（見here）。但是這不是那麼方便用戶，也不容易維護，因爲它有點破解，不使用「Typo3標準」，但只是一些一般的HTML/CSS黑客入侵：只有一幅圖像懸停效果的圖像菜單？

菜單的HTML是：

<p id="kat"> 
<a target="_blank" href="http://www.fusspflege.com/elkat/op/"> 
    <img src="/fileadmin/images/baehr_katalog2.png" /> 
</a> 
</p>

和相應的CSS：

#kat a { 
    background: url("/fileadmin/images/baehr_katalog2_hover.png") no-repeat; 
    display:block; height:120px; width:220px; /* Linkbereich begrenzen */ 
    } 

    #kat img { 
    display:block; width:220px; height:120px; border:0; 
    } 

    #kat a:hover img { 
    visibility: hidden; 
    }

所以基本上我表明在「標準模式」與白色字體圖像，當鼠標懸停時，該圖像是隱藏的，相同的圖像（黑色字體）在後臺變得可見。我認爲這是相當不錯的，它不需要任何JS :-)

但我想知道是否有辦法做到這一點更優雅，強大和用戶友好（也許與TYPO的工具？ ），以便用戶可以根據需要更改圖像，而不必擔心CSS ...

編輯：我找到了需要一個圖像的解決方案！（文是透明色和CSS有這樣的：

#kat a:hover img { 
    background-color: black; 
    }

但我仍想知道身邊有沒有一個更錯字式的解決方案;-)

來源

2015-03-31 MBaas

我不能爲我的生活弄清楚爲什麼你在CSS中非常簡單的事情上混淆了圖像。 – isherwood 2015-04-01 17:08:09

你指的是我最初的方法？簡單的原因：在今天之前，透明度概念並沒有出現在我的面前！：（（ – MBaas 2015-04-01 17:19:35

）我指的是任何將文本無條件放入圖像的方法，它會使維護，調整和更新變得非常痛苦。 – isherwood 2015-04-01 17:21:45

如在第q編輯，我發現了一種解決方案：

文本是在透明色和CSS有這樣的：

#kat：懸停IMG { 背景色：黑色; }

（爲了避免非CI字體創建問題，並保持良好的外觀等，我更喜歡作爲標題IMG與CSS樣式的文本的一部分。）

來源

2015-04-22 20:27:54 MBaas

如果你不使用文本鏈接（？只有圖像）你能夠切換這樣的屬性：

#kat a { 
 
    text-decoration: none; 
 
    display: block; 
 
    width: 220px; 
 
} 
 
#kat a img { 
 
    border: 0; 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
    opacity: .5; 
 
} 
 

 
#kat a:hover img { 
 
    opacity: 1; 
 
    transition: opacity 1s ease 0s; 
 
}

<p id="kat"> 
 
    <a target="_blank" href="http://www.fusspflege.com/elkat/op/"> 
 
     <img src="http://lorempixel.com/440/220"/> 
 
    </a> 
 
</p>

來源

2015-04-22 00:07:12

只有一幅圖像懸停效果的圖像菜單？

回答

相關問題