3

私はフィドルを作りました: http://jsfiddle.net/ATdRD/

誰でもこれを修正したり、これが機能しない理由を見つけたりできますか??

ユーザーが画像にカーソルを合わせると、ツールチップのようにスタイルを設定できるデータタイトルが表示されます

4

3 に答える 3

2

pタグでラップして位置を指定すると機能します。

<p class="kudoIcon" data-title="Admin">
    <img src="http://www.google.co.uk/images/srpr/logo3w.png" alt="Wapple" />
</p>

CSS

.kudoIcon {
    position: relative;
}

.kudoIcon:hover:after{
    content: attr(data-title);
    position: absolute;
    top:100px;          /*ADDED*/
    left:100px;         /*ADDED*/
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 7px;
    color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin-left: 7px;
    margin-top: -3px;
    z-index: 1000;
}

例: http://jsfiddle.net/ATdRD/2/

@BoltClock が述べたように、意味的には、divまたはタグ内に配置する方がおそらく良いでしょう。figure

于 2011-10-14T16:22:21.080 に答える
1

:afteron an <img>tag は、ほとんどのブラウザーでサポートされていないことがわかりました。(どうやら Opera でサポートされているようですが、他にはあまりありません)

私があなたに提供できる最善の解決策は、あなた<img>を a<div>または同様のものでラップしてその上に置くか、タグを完全に:after放棄して代わりに a を使用することです。<img>background-image

このサイトを見つけました - http://lildude.co.uk/after-css-property-for-img-tag - あなたにも役立つかもしれません.

于 2011-10-14T16:25:36.797 に答える
0

:after & :before、、replacedなどの要素では機能しませんimginputbutton

これをチェックしてくださいhttp://reference.sitepoint.com/css/replacedelements

したがって、このようにタグのnon-replace前に要素を定義する必要がありますimg

<a href="">
    <img src="image" alt="Wapple" />
</a>

http://sixrevisions.com/css/snazzy-hover-effects-using-css/

于 2011-10-14T16:27:13.683 に答える