Make A List Item Clickable HTML CSS

Question

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    lt ul gt       lt li gt Backpack  lt a href     title  Buy on Amazon  target   blank  gt  lt img src  img basket png  height  16  width  16  alt  Buy  class  buy  onClick  pageTracker  trackEvent  Amazon    School Supplies    Backpack      gt  lt  a gt  lt  li gt       lt  -- More List Items -- gt   lt  ul gt    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

User · Answer

HTML and CSS only    x000D   x000D   leftsideMenu ul li   x000D    border-bottom  1px dashed lightgray  x000D    background-color  cadetblue  x000D    x000D   x000D   leftsideMenu ul li a   x000D    padding  8px 20px 8px 20px  x000D    color  white  x000D    display  block  x000D    x000D   x000D   leftsideMenu ul li a hover   x000D    background-color  lightgreen  x000D    transition  0 5s  x000D    padding-left  30px  x000D    padding-right  10px  x000D    x000D   lt div id  leftsideMenu  gt  x000D     lt ul style  list-style-type none  gt  x000D       lt li gt  lt a href     gt India lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt USA lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt Russia lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt China lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt Afganistan lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt Landon lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt Scotland lt  a gt  lt  li gt  x000D       lt li gt  lt a href     gt Ireland lt  a gt  lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The li element supports an onclick event    lt ul gt   lt li onclick  location href    http   stackoverflow com questions 3486110 make-a-list-item-clickable-html-css    gt Make A List Item Clickable lt  li gt   lt  ul gt

User · Answer

Ditch the  lt a href       gt   Put the onclick  all lowercase  handler on the  lt li gt  tag itself

User · Answer

I think you could use the following HTML and CSS combo instead     lt li gt     lt a href     gt Backback lt  a gt   lt  li gt    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

User · Answer

How about putting all content inside link    lt li gt  lt a href     onClick            gt Backpack  lt img       gt  lt  a gt  lt  li gt    Seems like the most natural thing to try

User · Answer

The key is to give the anchor links a display property of  block  and a width property of 100    Making list-items clickable  example    HTML    lt ul gt       lt li gt  lt a href    gt link1 lt  a gt  lt  li gt       lt li gt  lt a href    gt link2 lt  a gt  lt  li gt       lt li gt  lt a href    gt link3 lt  a gt  lt  li gt   lt  ul gt    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

User · Answer

Here is a working solution - http   jsfiddle net STTaf   I used simple jQuery     function            li   css  cursor    pointer         click function             window location      a   this  attr  href            return false

User · Answer

I m sure it is a late response  but maybe is useful for somebody else  You can put all your  lt li gt  element content into  lt a gt  tag and add the following 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

[html] Make A List Item Clickable (HTML/CSS)

Examples related to html

Examples related to css