href内のhrefへの解決策？

Question

私は仕事に「HREF」でラップする必要がありますCSSのツールチップを使用します。

<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>ラップなしでテストしてみたツールチップは、まったく機能しません。）

Answer 1

をあなたが任意の要素のための:hoverセレクタを使用することができるだけでなく、アンカー：

HTML：

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

を

だからあなたのCSSであなたが持っているでしょう：

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

の代わり：

を

a:hover .tooltip { 
    ... 
} 

と、それは同じように動作するはずです。