我有一个导航栏，在一个黑色的 div 下方，导航栏中的下拉元素在该 div 下方。这不是黑色div的主要功能。它只是用于设计，但效果非常好。你可以在这里看到我在说什么： http: //www.ecoloc.ro/interior/test/regeneration。现在，我想要做的是，每次悬停导航栏中的主要元素时，都会出现一个足够大以覆盖主要元素的图像以及它下方的黑色 div 的一部分。您可以在我发布的链接中看到我想要图像的那个黑色间隙。这可以做到吗？
谢谢！
问问题
212 次
2 回答
2
您可以更改<a>内部的尺寸<li>并为其设置背景图像。如果您不希望主菜单出现，您只需在 ':hover' 上设置 'text-indent: -9999px' （图像替换技术）。
在悬停时设置修改并在 hout 时恢复正常的最佳方法是使用样式创建不同的类。因此，您在悬停时通过 JavaScript 更改类，自动更改尺寸。
于 2012-09-26T14:38:06.977 回答
0
因为你已经为你的“子菜单”列表使用了绝对定位，你应该可以用一点 CSS 来做到这一点。
为background-image:包含所需图形的列表元素提供一个 set background-repeat: no-repeat，设置一个绝对值height:并将列表重新定位到正确top:的left:角。使用margin:andpadding:将列表元素放到正确的位置。
- 更新： -
尝试以下快速而肮脏的第一张草图，看看我是否明白了：
<ul id="media" style="position: absolute; top: 108px; left: 1018px; height: 35px; background-color: red; padding-left: 131px; padding-top: 35px; ">
<li><a href="#" title="" data-description="starts here">presa</a></li>
<li><a href="#" title="" data-description="starts here">video</a></li>
<li><a href="#" title="" data-description="starts here">foto</a></li>
</ul>
子菜单涵盖您的主菜单条目和黑色子菜单栏。提供准确覆盖所需区域的图像并微调定位。
于 2012-09-26T14:43:30.190 回答