使列表项可点击（HTML / CSS） [英] Make A List Item Clickable (HTML/CSS)

问题描述

因此，我想让每个列表项在我的网站上可点击，但我不确定是什么最好的办法做到。请帮我。

这里是相关的HTML：

 < ul> 
< li>背包< a href =＃title =在Amazon上购物target =_ blank>< img src =img / basket.pngheight =16width = 16alt =Buyclass =buyonClick =pageTracker._trackEvent（'Amazon'，'School Supplies'，'Backpack'）;/>< / a> 
<！ - 更多列表项 - > 
< / ul> 
  

这里是相关的CSS：

  .content ul li {
 display：block; 
 list-style：none; 
 padding：5px 10px 5px 15px; 
} 
 
 .content li li {
 //这是当有子类别时。 
 border-bottom：none; 
 border-top：1px solid＃f8d9d0; 
 margin：3px -10px -3px -15px; 
 padding：5px 0px 5px 30px; 
} 
 
 .buy {
 float：right; 
 margin-top：-2px; 
} 
 
 //接下来的都是处理只显示在悬停上的购物车图标。 
 
 .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为亚马逊的链接，但是似乎搞乱了图像的位置。 >

非常感谢你！

解决方案

我想你可以使用下面的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; 
} 
  

奇怪！

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!

解决方案

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!

这篇关于使列表项可点击（HTML / CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！