How to implement multiple image buttons on one dedicated line
I am creating a UI where I want each row to respond with a color effect when flipped, painting the entire background of that particular row to a given color. In addition, each line should contain several small characters (buttons), which should also respond to user clicks and rollovers.
The only way I know this is using an anchor tag, but once I have used that, I cannot nest another anchor in it. Is there a way to create "nested buttons" or a workaround (preferably not including javascript) to accomplish my goal here?
maralbjo
Your CSS file may contain:
li:hover {
background-color: #3f3; /* whatever color you want */
list-style: none;
}
Your HTML file might just have a list of elements:
<ul>
<li><a href="alink.html"><img src="image.png" alt="mybutton"></a></li>
<li>Line</li>
<li>Goes</li>
<li>Here</li>
</ul>
a source to share
You cannot get it to work in older IE browsers without scripting. :(
I ended up doing what Dmitry Farkov suggested in his comment: adding hover behavior with a script. There is an interesting alternative that I have been using for a while: whatever: hover .
Perhaps it will suit you better.
a source to share