具有悬停效果的图像菜单仅包含一张图像？答案

【问题标题】：Image-menu with hover-effect with one image only?具有悬停效果的图像菜单仅包含一张图像？
【发布时间】：2015-03-31 21:02:51
【问题描述】：

我用 TYPO3 (4.7.2) 建立了一个站点，它的右侧有一个漂亮的图形菜单（请参阅 here）。但这不是那么用户友好，也不容易维护，因为它有点像 hack 并且不使用“Typo3-Standards”，而只是一些通用的 HTML/CSS-hacking：

菜单的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;
  }

但我仍然想知道是否没有更类似于 TYPO 的解决方案？ ;-)

【问题讨论】：

我这辈子都想不通你为什么要在 CSS 中如此简单的东西上搞乱图像。
你指的是我最初的做法？原因很简单：在今天之前我没有想到透明的想法！ :((
我指的是任何无故将文本放入图像的方法。它使维护、调整和更新变得非常痛苦。

标签： html css menu typo3

【解决方案1】：

如果您不使用文本链接（仅图像），您可以像这样切换属性：

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

【讨论】：

【解决方案2】：

按照q中的编辑，我找到了解决方案：

文本是透明的颜色，CSS 有这样的：

#kat a:hover img { 背景颜色：黑色； }

（为了避免非 CI 字体造成的问题并保持美观等，我更喜欢将标题作为 img 与 CSS 样式文本的一部分。）

【讨论】：