CSSのホバリングdivリンク

Question

私は次のCSSを使用して、ユーザーが特定のリンク上を移動したときに情報を含むポップアウトメニューを作成しています。ユーザーがスパン内のリンクをクリックできるように、フォローコードを変更するにはどうすればよいですか？現時点では、マウスが元のリンクから離れると、divが消えます。あなたがそこに持ってない有効なHTMLである

a:hover { 
position: relative; 
} 

a span { 
display: none; 
} 

a:hover span { 
color:#006699; 
display: block; 
position: absolute; 
width:190px; 
height:12px; 
top: -15px; 
left: 30px; 
padding: 5px; 
z-index: 100; 
} 

<a href=email.php>email<span>text</span></a> 

Answer 1

- ブロックレベルpタグはインラインaとspanタグに含まれていることはできません。また、HTML5を使用していても、どの要素が他の要素の中にあるかについてのルールを変更したとしても、アンカーを使用することはできません。内部にアンカーがあります。

代わりに、adjacent sibling selectorsを使用して、ポップアップ要素をその内部の代わりに文書マークアップのアンカーの隣に表示させることで、ジョブを実行することができます。

ただし、JavaScriptを使用してサイトの動作要素を制御することをお勧めします.JavaScriptはまた、ポップアップの動作をより詳細に制御することができます。