Hacer un elemento de la lista que se puede hacer clic (HTML/CSS)

Question

Estoy tratando de hacer clic en cada elemento de la lista en my site, pero no estoy seguro de cuál es la mejor manera de hacerlo. Por favor, ayúdame.

Así que aquí es el código HTML correspondiente:

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

Y aquí es el CSS relevante:

.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; 
} 

¿Cómo puedo hacer que el conjunto de ítems de lista se puede hacer clic y todavía tienen el icono de carrito de compras y El seguimiento de eventos de Google Analytics aún funciona? ¿Hay algo de magia jQuery que pueda usar?

He intentado usar display: block para los enlaces de Amazon, pero eso parece estropear la colocación de la imagen.

¡Muchas gracias!

Answer 1

¿Qué le parece poner todo el contenido dentro del enlace?

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

Parece la cosa más natural para probar.

Answer 2

Creo que se podría utilizar la siguiente combinación de HTML y CSS en su lugar:

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

A continuación, el uso de fondo CSS para la visibilidad cesta en vuelo estacionario:

.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

Zanja el <a href="...">. Coloque el controlador onclick (todo en minúsculas) en la etiqueta <li>.

Answer 4

El elemento li admite un evento onclick.

<ul> 
<li onclick="location.href = 'http://stackoverflow.com/questions/3486110/make-a-list-item-clickable-html-css';">Make A List Item Clickable</li> 
</ul> 

Answer 5

Aquí es una solución de trabajo - http://jsfiddle.net/STTaf/

que utiliza jQuery sencilla:

$(function() { 
    $('li').css('cursor', 'pointer') 

    .click(function() { 
     window.location = $('a', this).attr('href'); 
     return false; 
    }); 
}); 

Answer 6

Estoy seguro de que es una respuesta tardía, pero tal vez es útil para alguien más. Puede poner todo su contenido <li> elemento en <a> etiqueta y añadir el siguiente CSS:

li a { 
    display: block; 
    /* and you can use padding for additional space if needs, as a clickable area/or other styling */ 
    padding: 5px 20px; 
} 

Answer 7

puro HTML/CSS

----------------- -------- HTML -----------------------

<div id="leftsideMenu"> 
       <ul class="vertical"> 
        <li><a href="#">India &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">USA &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">Russia &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">China &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">Afganistan &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">Shrilanka &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">Landon &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">Scotland &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
        <li><a href="#">Ireland &nbsp;<i class="fa fa-arrow-right pull-right" aria-hidden="true"></i></a></li> 
       </ul> 
</div> 

----------- ------------ CSS --------------------------

#leftsideMenu ul.vertical { 
     list-style-type: none; 
     width: 100%; 
     height: auto; 
     padding-left: 0; 
    } 

    #leftsideMenu ul li { 
     width: 100%; 
     border-bottom: 1px dashed #eee; 
     background-color: cadetblue; 
     color: white; 
    } 

     #leftsideMenu ul li a { 
      padding:8px 20px 8px 20px; 
      color: white; 
      display: block; 
     } 

      #leftsideMenu ul li a:hover { 
       background-color: #8BC34A; 
       color: white; 
       transition: 0.5s; 
       padding-left: 30px; 
       padding-right: 10px; 
      } 

      #leftsideMenu ul li a:focus { 
       background-color: #8BC34A; 
      } 

Answer 8

La clave es dar a los enlaces de anclaje una propiedad de visualización de "bloque" y una propiedad de ancho del 100%.

Haciendo list-elementos interactivos (ejemplo):

HTML:

<ul> 
    <li><a href="">link1</a></li> 
    <li><a href="">link2</a></li> 
    <li><a href="">link3</a></li> 
</ul> 

CSS:

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
ul li a { 
    display: block; 
    width: 100%; 
    text-decoration: none; 
    padding: 5px; 
} 
ul li a:hover { 
    background-color: #ccc; 
}