web-dev-qa-db-ja.com

CSS-ホバーに表示されるアイコンへのリンク

Divの上にホバーすると、divの右側の上部にアイコンが表示されます。私のコードは次のとおりです：

<div class='edit_hover_class'>
   <!-- some code -->
</div>

そして、対応するcssファイルには以下が含まれます。

.edit_hover_class:hover {
  background: url("trash.gif") no-repeat scroll right top;
}

編集アイコンにリンクを添付したいのですが、プレーンなCSSで可能ですか？もしそうなら、どうですか？

csshover
12
Appster

次のようにホバーするまでリンクを非表示にすることができます：

<div class='edit_hover_class'>
   <a href='#'><img src='icons/trash.gif' /></a>
</div>

.edit_hover_class a{
  visibility:hidden;
}
.edit_hover_class:hover a {
 visibility:visible;
}

Jsfiddleを参照してください：

http://jsfiddle.net/Auzm5/

または、アイコンのみをリンクする場合は、CSS visibilityを使用します。

http://jsfiddle.net/Auzm5/1/

34
Curt