javascript - CSS のトリッキーなホバー効果

Question

画像にカーソルを合わせるたびに画像やテキストを表示するにはどうすればよいですか? 皆さん、私を助けてくれますか?

例：

Answer 1

これは実際にはまったく複雑ではありません...以下と同様の HTML 構造を使用し、ホバー時のスパンの表示プロパティを変更するだけです。

http://jsfiddle.net/kkxfk/2/

<ul>
    <li><a href="#">Link Title<span>Link Desc.</span></a></li>
</ul>

絶対配置を使用して、必要な場所にスパンを配置します。ul li a span { 表示: なし; }

ul li a:hover span {
    display: block;
    position: absolute;
}

Answer 2

私は自分のアイデアでそれを使用し、完全に満足しています.2つの画像を作成する必要があります。最初はテキストなしで、2番目はテキストとハウアーで.....試してみてください.....

 <style type="text/css">
    .leftPan{width:200px; float:right;; margin-top:2px}

    #c1 {
     margin:6px;
     border: thin solid black;
     width: 200px;
     height: 200px;
     background: url(1.jpg) no-repeat;
     display: inline-block;
    }
    #c1:hover {
     background: url(2_photo.jpg) no-repeat;
    }

    </style>

Answer 3

要素に背景画像を使用しaます。

その後、css でいつ表示されるかを制御できます

a:hover {
    background-image: url(url/to/img);
}

このような

html

<nav>
    <a href="#Räätälöity-toimitus">Räätälöity-toimitus</a>
    <img src="http://placehold.it/200x200&text=image" alt="Räätälöity toimitus" />
</nav>

CSS

nav {
    position: relative;
    display: inline-block;
}
a {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 7;
}
a:hover {
    background-image: url(http://placehold.it/50x50/E8117F/E8117F/);
    background-repeat: no-repeat;
    background-position: top right;
}

http://jsfiddle.net/UpGKf/