7

画像のホバーにCSS効果を加えたいのですが。

画像にカーソルを合わせると、テキストなどのコンテンツを含むdivが表示されます。

だから私はこのコードで何かをしたいと思います：

<div id="image"><img src="image.png"/></div>

<div id="hover">Test message</div>

cssディスプレイで「ホバー」divを非表示にしようとしましたが、ホバー時にディスプレイをブロックに設定しようとしましたが、機能しません... :(

編集：画像にテキストが必要です。画像にカーソルを合わせると不透明度が高くなりますが、テキストはその不透明度を認識しないはずです。

これを行う方法はありますか？

4

6 に答える 6

10

http://jsfiddle.net/ZSZQK/

#hover {
    display: none;
}

#image:hover + #hover {
    display: block;
}

シンプルに保つだけで、マークアップを変更する必要はありません。

アップデート

マウスホバーで画像の不透明度を変更する場合は、 http：//jsfiddle.net/ZSZQK/4/

#hover {
    display: none;
    position: relative;
    top: -25px;
}

#image:hover {
    opacity: .7;
}

#image:hover + #hover {
    display: block;
}

アップデート2

最初の質問にさらにいくつかの要件を追加したため、元のhtmlマークアップを変更する必要があります。

を使用していると想定しています。使用している場合はhtml5、コンテンツのコンテキストに適したタグを使用する必要があります。

<figure>
    <img src="http://placekitten.com/200/100" />
    <figcaption>Test message</figcaption>
</figure>

とcss

figure {
    position: relative;
    display: inline-block;
}

figcaption {
    display: none;
    position: absolute;
    left: 0;
    bottom: 5px;
    right: 0;
    background-color: rgba(0,0,0,.15);
}

figure:hover img {
    opacity: .7;
}

figure:hover figcaption {
    display: block;
}

jsFiddle

于 2013-03-11T13:02:40.857 に答える
3

試す：

<div id="image">
    <img src="image.png"/>
    <div class="hover">Test message</div>
</div>

CSS：

#image {
    position:relative;
}

#image .hover {
    display:none;
    position:absolute;
    bottom:0;
}

#image:hover .hover {
    display:block;
}

基本的に私がしたことは：

  • テキストdivをdiv内に移動し#imageました。
  • に変更id="hover"されましたclass="hover"
  • display:blockがホバーされている場合#imageとホバーされていない場合に追加されdisplay:noneます。
  • いくつかのポジショニングルール、それは単なる簡単な例です、それが機能するかどうか私に知らせてください。
于 2013-03-11T13:00:51.807 に答える
1

これを行う方法はたくさんありますが、CSSのみのアプローチが必要な場合は、htmlを次のように再構築する必要があります。

<div id="image">
    <img src="image.png"/>
    <div id="hover">Test message</div>
</div>

そして、CSSでデフォルトでメッセージを非表示にします。

#hover {display:none;}

次に、メッセージを表示します。

#image:hover #hover {display:block;}
于 2013-03-11T13:02:59.317 に答える
0

これが私がグーグルで見つけた解決策です

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Untitled Document</title>
                </head>
                <style type="text/css">
                #mybox {
                width:80px;
                height:90px;
                float:left;
                background-color:#0F9;
                padding:10px;
                }
                .Imgdiv {
                width:80px;
                height:20px;
                margin:0px 0px 10px 0px; padding:0px;
                cursor:pointer;
                background-color:#39C;
                }
                #mybox .hiddenDiv {
                left:0px;
                display:none;
                z-index:100;
                width:80px;
                height:50px;
                margin:0px;
                background-color:#336;
                float:left;
                }
                #mybox:hover .hiddenDiv {
                display:block; top:0px; left:8px;
                }
                </style>
                <body>
                <div id="mybox">
                <div class="Imgdiv"></div>
                <div class="hiddenDiv"></div>
                </div>


                </body>
                </html>
于 2013-03-11T13:11:34.473 に答える
0

JavaScriptがなければ、次のように実行できます。

1.#hover div画像の上にbeを作成し、opacity:0;を設定します。

2.これをcssに追加するより：

    #hover:hover {
     opacity:1
     }

これで問題が解決するはずです。

于 2013-03-11T13:02:41.710 に答える
0

こんにちは私が正しく理解しているなら、あなたはこのようなものが欲しいです：

<div id="wrapper">
    <div id="img-wrapper">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSp7bY6nYWTDmFXKSlP4TdCe5ghVQhbt85tQMS8dfZMEGw7QOXiLA">
    </div>
    <div id="text-wrapper">
        <p>Hello world!</p>
    </div>        
</div>

CSS：

#wrapper{
    position:relative;
    border:1px solid black;
    width:102px;
    height:102px;
}

#text-wrapper{
    position:absolute;
    height:0px;
    overflow:hidden;
    font-size:14px;
    font-family:Arial,Tahoma;
    font-weight:bold;

    transition: height 1s;
    -moz-transition: height 1s; /* Firefox 4 */
    -webkit-transition: height 1s; /* Safari and Chrome */
    -o-transition: height 1s; /* Opera */

}

#img-wrapper:hover + #text-wrapper{
    height:32px;
    width:102px;
}

これを実現するための鍵は、次のcss行です。

#img-wrapper:hover + #text-wrapper{

それが実際に行うことは、「img-wrapper divにカーソルを合わせると、text-wrapperdivでいくつかの処理を実行する」です。

ここでデモを確認してください：http：//jsfiddle.net/A9pNg/1/

于 2013-03-11T13:19:59.253 に答える