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

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

所以基本上我在“标准模式”中显示带有白色字体的图像，当鼠标悬停时，该图像被隐藏并且背景中的相同图像(带有黑色字体)变得可见。我觉得这很好，而且不需要任何 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>