Сделать элемент списка Clickable (HTML/CSS)

Итак, я пытаюсь сделать каждый элемент списка моего сайта доступным, но я не уверен, что это лучший способ сделать Это. Пожалуйста, помогите мне.

Итак, вот соответствующий 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>

И вот соответствующий 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;
}

Как я могу сделать весь элемент списка доступным и все еще иметь значок корзины покупок и отслеживание событий Google Analytics? Есть ли какая-нибудь магия jQuery, которую я могу использовать?

Я пробовал использовать display: block для ссылок Amazon, но это, похоже, испортило размещение изображения.

Большое вам спасибо!

Ответ 1

Я думаю, вы могли бы использовать следующие HTML и CSS-комбо:

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

Затем используйте CSS-фон для видимости корзины при наведении:

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

Ответ 2

Элемент li поддерживает событие 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>

Ответ 3

Вот рабочее решение - http://jsfiddle.net/STTaf/

Я использовал простой jQuery:

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

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

Ответ 4

Поверните <a href="...">. Поместите обработчик onclick (все строчные буквы) в тег <li>.

Ответ 5

Как разместить весь контент внутри ссылки?

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

Кажется, самое естественное, что нужно попробовать.

Ответ 6

Я уверен, что это поздний ответ, но, возможно, полезен для кого-то другого. Вы можете поместить все содержимое элемента <li> в тег <a> и добавить следующий 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; 
}

Ответ 7

Чистый 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;
            }

Ответ 8

Ключ должен дать привязке привязать свойство отображения "block" и свойство width 100%.

Создание элементов списка с кликами (пример):

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