javascript - 如何将图像映射与图像 Sprite 一起使用？

Question

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

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

我该怎么做呢？一直找不到任何信息足以帮助我解决问题。

Answer 1

简单的方法是在链接中放置一个子项，如果单击子项...打开下拉列表，如果不单击链接

相应地定位和调整 child 的大小

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

j查询

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

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