Question

我用TYPO3（4.7.2）构建了一个站点，右侧有一个漂亮的图形菜单（参见here）。但这不是那么用户友好，也不容易维护，因为它有点黑客并且不使用“Typo3-Standards”，而只是一些普通的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;
  }

但我仍然不知道周围是否还有更多的TYPO式解决方案？ ; - ）

Answer 1

如果您不使用文字链接（仅限图片），您可以切换这样的属性：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

正如在q中编辑的那样，我找到了一个解决方案：

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

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

（为了避免非CI字体产生的问题并保持良好的外观等，我更喜欢将字幕作为img与CSS样式文本的一部分。）

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

2 个答案: