1

要素がdivあり、ユーザーがdiv. Javascript を介してmouseoverとmouseoutイベントでこれを行うことができますが、 を使用してこれを行いたいですCSS。

では、CSSを使用してどのようにそれを行うことができますか?

4

3 に答える 3

2

この効果には CSS :after セレクターを使用できます。

#myDIV:hover:after
{
    content: '';
    display: block;
    position: absolute;
}

そこから、画像を背景として通常の要素としてスタイルを設定したり、好みに合わせてコンテンツ フィールドを編集したりできます。これにより、#myDIV にカーソルを合わせると疑似要素が挿入されます。古いブラウザーのサポートが必要な場合は、JavaScript コードをフォールバックとして使用し、modernizrを使用してブラウザーの機能を検出できます。

于 2012-10-04T20:39:31.567 に答える
1

またはのような兄弟セレクターでこれを行うことができます: http://jsbin.com/uvepiq/1/edit+~

これらを使用すると:hover、1 つの要素をチェックして、次の兄弟要素にスタイルを適用できます。したがって、画像の通常のスタイルは で非表示になりdisplay: none、前の兄弟がホバーされると、スタイルを変更できますdisplay: block。

于 2012-10-04T20:25:17.547 に答える
0

CSS でこれを行うことができます。

<div class="outer">
    Texty Texterson...
    <div><img src="http://codinghorror.typepad.com/.a/6a0120a85dcdae970b0128776ff992970c-pi" /></div>
</div>

CSS:

.outer div{
    display: none;
}

.outer:hover div{
    display: block;
}

しかし、jQuery/javascript を使用してこれを行うと、フェードなどの素晴らしい効果を実行できるようになります。

$(document).ready(function () {
$('.outer').hover(
    function () { 
        $(this).find('div').fadeIn();
    }, 
    function () { 
        $(this).find('div').fadeOut();
    });
});
于 2012-10-04T20:46:29.203 に答える