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

我已经建立了一个网站TYPO3（4.7.2），它有一个很好的图形菜单在右侧（见here）。但是这不是那么方便用户，也不容易维护，因为它有点破解，不使用“Typo3标准”，但只是一些一般的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; 
    }

但我仍想知道身边有没有一个更错字式的解决方案;-)

来源

2015-03-31 MBaas

我不能为我的生活弄清楚为什么你在CSS中非常简单的事情上混淆了图像。 – isherwood 2015-04-01 17:08:09

你指的是我最初的方法？简单的原因：在今天之前，透明度概念并没有出现在我的面前！：（（ – MBaas 2015-04-01 17:19:35

）我指的是任何将文本无条件放入图像的方法，它会使维护，调整和更新变得非常痛苦。 – isherwood 2015-04-01 17:21:45

如在第q编辑，我发现了一种解决方案：

文本是在透明色和CSS有这样的：

#kat：悬停IMG { 背景色：黑色; }

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

来源

2015-04-22 20:27:54 MBaas

如果你不使用文本链接（？只有图像）你能够切换这样的属性：

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

来源

2015-04-22 00:07:12

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

回答

相关问题