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

Question

我正在制作一个用户界面，我希望每条线在滚动时都能响应颜色效果，以给定的颜色为该特定线的整个背景着色。 此外，每行应包含几个小符号（按钮），这些符号也应响应用户的单击和鼠标悬停。

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

马拉尔布约

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

Answer 2

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

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

也许它更适合您。