How to implement several image buttons on a single, highlighted line

Question

I am making a user interface where I want each line to respond with a color effect when rolled over, coloring the entire background of that particular line in a given color. In addition, each line should contain several small symbols (buttons) that also should respond to user clicks and rollovers.

The only way I know to do this using the anchor tag, but once I have used that, I cannot nest another anchor within it. Is there a way to produce "nested buttons" or a workaround (preferrably not including javascript) to accomplish my goal here?

maralbjo

Answer 1

Your CSS file could contain:

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

Your HTML file could then just have a list of items:

<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

You cannot make it work in older IE browsers without scripting. :(

I ended up doing what Dmitri Farkov proposed in his comment: adding hover behavior via script. There is an interesting alternative I used for a while, though: whatever:hover.

Maybe it will suit you better.