href中href的解决方案？

Question

我使用CSS工具提示，它必须包装在一个“href”中才能工作。

<a href="#">
<img src="http://www.url.com/image.png" alt="" width="20" height="20" />
<span class="tooltip center white">
<img src=" http://www.url.com/image.png" alt="" width="80" height="80" />iPad [add_to_cart_anchor item="ipad"]purchase the iPad[/add_to_cart_anchor] </span>
</a>

如你所见，我使用的是“工具提示”和Cart66 (使用锚点快捷码)。

输出结果如下：

<a href="#">
<img width="20" height="20" alt="" src="http://www.url.com/image.png"/>
<span class="tooltip center white">
<img width="80" height="80" alt="" src=" http://www.url.com/image.png"/>iPad </span>
</a>
<a href="http://www.url.com/cart?task=add-to-cart-anchor&amp;cart66ItemId=1">purchase the iPad</a>

问题是“购买iPad”是包装在代码中的href中的href，因此它被放在工具提示之外。我怎么才能解决这个问题，这样“购买...”链接仍然在跨度内，因此是工具提示，同时仍然允许工具提示工作？(我在没有<a> wrap的情况下进行了测试，工具提示完全不起作用。)

Answer 1

您可以对任何元素使用:hover选择器，而不仅仅是锚点：

HTML：

<span class="tooltipwrapper">
  ...
</span>

所以在你的CSS中，你会有：

span.tooltipwrapper:hover .tooltip {
  ...
}

而不是：

a:hover .tooltip {
  ...
}

它也应该是一样的。