使用 Image 作为带有 jquery、html 和 css 的事件触发器

Question

我正在使用 css、jquery 和 html 开发一个项目网站。发生的事情是，在 html 中，我有一个只有 3 列的表格，并且我正在放置图像以用作按钮来切换按钮下方的内容。代码如下：

<table id='buttom-service'>
            <tr>
                <td class="selectors">
                    <img src="images/icon1.png" id='ser_bt1'alt="Radiocomunicacion" />
                </td>
                <td class="selectors">
                    <img src="images/icon2.png" id='ser_bt2' alt="Arquitectura" />
                </td>
                <td class="selectors">
                    <img src="images/icon3.png" id='ser_bt3' alt="Radiocomunicacion"/>
                </td>
            </tr>
        </table>

现在，我使用 jquery 将图像作为按钮：

$(document).ready(function(){
   //default load
   $('#buttom-service').addClass('hover');

   //action buttoms
   $('#ser_bt1').click(function(){
    do stuff;

   });
   $('#ser_bt2').click(function(){
    do stuff;

   });
   $('#ser_bt3').click(function(){
    do stuff

   });});

这样做的问题是前 2 个图像中的 clicable 区域被缩小到图像的下部而不是整个图像，而第三个元素工作正常。 （顺便说一句，他们切换内容很好） 我需要一些关于如何使这三个图像正确地作为按钮工作的建议。 （可点击区域）

谢谢

Answer 1

那……呢？

$('#ser_bt1,#ser_bt2,#ser_bt3').closest('.selectors').on('click',function(){
    //do stuff
});

Answer 2

尝试使用按钮标签。将点击监听器附加到按钮上，并将图片设置为css中按钮的背景。