我用 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 的解决方案? ;-)
最佳答案
如果您不使用文本链接(仅图像),您可以像这样切换属性:
#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>
关于html - 具有悬停效果的图像菜单只有一张图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29378517/