Make A List Item Clickable (HTML/CSS)

Question

Hi,

So I'm trying to make each list-item on my site clickable but I'm not sure what is the best way to do it. Please help me out.

So here is the relevant HTML:

<ul>
    <li>Backpack <a href="#" title="Buy on Amazon" target="_blank"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Amazon', 'School Supplies', 'Backpack');"/></a></li>
    <!-- More List Items -->
</ul>

And here is the relevant CSS:

.content ul li {
    display:block;
    list-style:none;
    padding:5px 10px 5px 15px;
}

.content li li {
    // This is for when there are sub-categories.
    border-bottom: none;
    border-top: 1px solid #f8d9d0;
    margin: 3px -10px -3px -15px;
    padding: 5px 0px 5px 30px;
}

.buy {
    float: right;
    margin-top: -2px;
}

// The next ones all deal with the shopping cart icon that appears only on hovers.

.listblock ul li img { 
    visibility: hidden;
}

.listblock ul li:hover img { 
    visibility: visible;
}

.listblock ul li ul li img { 
    visibility: hidden !important;
    margin-right: 10px;
}

.listblock ul li ul li:hover img { 
    visibility: visible !important;
    margin-right: 10px;
}

How can I make the whole list-item clickable and still have the shopping cart icon and Google Analytics Event tracking still work? Is there some jQuery magic I can use?

I've tried using display:block for the Amazon links, but that seems to mess up the image placement.

Thank you so much!

Answer 1

How about putting all content inside link?

<li><a href="#" onClick="..." ... >Backpack <img ... /></a></li>

Seems like the most natural thing to try.

Answer 2

I think you could use the following HTML and CSS combo instead:

<li>
  <a href="#">Backback</a>
</li>

Then use CSS background for the basket visibility on hover:

.listblock ul li a {
    padding: 5px 30px 5px 10px;
    display: block;
}

.listblock ul li a:hover {
    background: transparent url('../img/basket.png') no-repeat 3px 170px;
}

Simples!

Answer 3

Ditch the <a href="...">. Put the onclick (all lowercase) handler on the <li> tag itself.

Answer 4

Inline events shouldn't really be used because essentially you want to keep the markup (html), presentation (css) and behaviour (js) separate. What you should do is to add a class to the ul and use that class to target all li elements and bind a click event. This should then find the href inside and fire that event. This can be easily done by javascript so an example using my favourite library (mootools) http://jsfiddle.net/Ymkpb/