如何使用带有图像精灵的图像映射？

Question

所以我有一个按钮精灵，我想用于我的网站（https://www.metsales.com/MetropolitanSales/microsite/epson/images/epson_buttons.png）， 我想知道是否可以设置每个按钮的一部分来打开一个下拉菜单。

这可能会有点令人困惑但是，对于每个按钮，当您将鼠标悬停在整个按钮上时，我在精灵中有一个悬停图像，但我想区分点击每个按钮上的箭头和按钮本身。因此箭头将显示一个下拉菜单，按钮将带您进入概述页面。

我该怎么做呢？找不到任何有足够信息来帮助我的东西。

Answer 1

是的，您可以做的就是调整每个按钮内的元素，在我的情况下，我使用a和div ul请查看此演示

http://jsfiddle.net/BFWQa/13/

并询问是否符合您的预期。

Answer 2

简单的方法是将孩子放在链接中，如果点击了孩子...打开下拉列表，如果没有点击链接

相应地确定孩子的位置和大小

<a class="buttonClass" href="foo.html"><span class="toggleDropdown"></span></a>

JQUERY

$('a.buttonClass').click(function(e){
   if( $(e.target).is('.toggleDropdown') ){
         /* prevent href being opened*/
          e.preventDefault()
         /* run dropdown code here */            
   }
})

用户不会看到孩子，因为它是透明的

Answer 3

您应该使用background-image的{​​{1}}和background-position规则。有关详细信息，请查看this链接。

如果有帮助，请将其投票或/并将其标记为答案。