如何在单个突出显示的行上实现多个图像按钮答案

【问题标题】：How to implement several image buttons on a single, highlighted line如何在单个突出显示的行上实现多个图像按钮
【发布时间】：2010-10-28 17:59:06
【问题描述】：

我正在制作一个用户界面，我希望每一行在滚动时都以颜色效果做出响应，以给定的颜色为该特定行的整个背景着色。此外，每一行都应该包含几个小符号（按钮），它们也应该响应用户的点击和翻转。

我知道使用锚标记执行此操作的唯一方法，但是一旦我使用了它，我就不能在其中嵌套另一个锚。有没有办法产生“嵌套按钮”或解决方法（最好不包括 javascript）来实现我的目标？

马拉比乔

【问题讨论】：

【解决方案1】：

您的 CSS 文件可能包含：

li:hover {
   background-color: #3f3; /* whatever color you want */
   list-style: none;
}

您的 HTML 文件可能只有一个项目列表：

<ul>
 <li><a href="alink.html"><img src="image.png" alt="mybutton"></a></li>
 <li>Line</li>
 <li>Goes</li>
 <li>Here</li>
</ul>

【讨论】：

唯一的事情是你必须在 javascript 中添加一个脚本来将 .hover 类分配给悬停时的 li 元素。为什么？因为 IE 不识别 :hover 伪类，除了锚点。

【解决方案2】：

如果不编写脚本，您将无法使其在较旧的 IE 浏览器中运行。 :(

我最终做了 Dmitri Farkov 在他的评论中提出的建议：通过脚本添加悬停行为。不过，我使用了一个有趣的替代方案：whatever:hover。

也许它会更适合你。

【讨论】：