13

DIV にカーソルを合わせたときにコンテンツを表示することは可能ですか。画像を見る

div にカーソルを合わせると遷移が発生しますが、ホバリング div 内にコンテンツを表示することはできますか。画像等

html :

<div class="flowingdown">

</div>

CSS3:

.flowingdown {
    width:1045px;
    background-image:url(images/vertical_cloth.png);
    height:50px;
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:0 0  55px 55px ;
    transition: height 1s;
    -webkit-transition: height 1s;


}

.flowingdown:hover {
    height:100px;
}
4

4 に答える 4

0

背景画像の下半分を隠そうとしていると思いますが、この正確なコードをテストしたところ、うまくいきました：

<html>
<head>
<style>

.flowingdown {
    width:1045px;
    background-image:url(../Pictures/C_2560x1400.jpg);
    height:50px;
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:0 0  55px 55px ;
    transition: height 1s;
    -webkit-transition: height 1s;


}

.flowingdown:hover {
    height:100px;
}
</style>
</head>
<body>

<div class="flowingdown">

</div>

</body>

自分の画像を使用したことを除いて、これはあなたが使用したコードとまったく同じです。

ホバー時に背景画像を変更したい場合は、CSS を次のようにする必要があります。

.flowingdown:hover {
    height:100px;
    background-image:url(path.jpg);
}

あなたの質問を誤解した場合はお知らせください。

于 2013-07-25T13:26:15.787 に答える
0

はい、可能です。

ただし.flowingdown、div内にラップします。コンテンツ全体を表示するには、

<div style="width: 200px; height:300px;">
    <div class="flowingdown"></div>
</div>

CSS: 

.flowingdown {
    width:1045px;
    background-image:url(http://i.imgur.com/hHUa9Ty.jpg);
    height:50px;
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    border-radius:0 0 55px 55px;
    transition: height 1s;
    -webkit-transition: height 1s;
}
.flowingdown:hover {
    height:100%; //Inorder to show the entire content within the parent.
}

このJSFiddleを確認してください

于 2013-07-25T13:15:35.120 に答える