jquery - 单击图标时带有附加信息的按钮

Question

我的旁边有一个带有信息图标的按钮，如下所示:

理想情况下，当仅单击信息图标时，它应该显示有关该按钮的更多信息

当点击整个按钮时，它应该转到必要的链接。

这是我到目前为止所做的.. 按钮 A 正在显示信息，但不是我想要的。

按钮 B 具有我想要的过渡和样式，悬停时变暗，悬停在信息图标上时放大，除了没有信息...我不确定如何才能仅在我单击 在图标上，同时仍保留按钮上的必要链接

<a class="button">
  <span class="title">
  Button A<span class="search"></span></span>
  <span class="info">Cupcake ipsum dolor sit amet</span>
</a><br/><br/>
<a class="button">Button B<span class="search"></span>
</a><br/><br/>

https://jsfiddle.net/cdz0nfu2/2/

Answer 1

我同意 @CBroe ，但是，要回答您的问题，您可以使用 jQuery 来收听信息点击:

$(".button:nth-of-type(2) span").click(function(){
    alert("info clicked"); <-- Show the other info here
})