具有悬停效果的图像菜单只有一张图像？

Question

我用 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;
  }

所以基本上我在 "standard mode" 中显示白色字体的图像，当鼠标悬停时，该图像被隐藏，背景中的相同图像（黑色字体）变得可见。我觉得这很好，不需要任何 JS :-)

但我想知道是否有一种更优雅、更健壮和用户友好的方法（也许使用 TYPO 的工具？），以便用户可以更改如果需要图像而不必担心 CSS...

编辑： 我找到了一个需要一张图片的解决方案！（文本是透明颜色，CSS 有这个：

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

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

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

Answer 2

在q中编辑，我找到了解决方案：

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

#kat a:hover img { background-color：黑色； }

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

具有悬停效果的图像菜单只有一张图像？

Image-menu with hover-effect with one image only?

html

css

menu

typo3