web-dev-qa-db-ja.com

DIVにカーソルを合わせたときにコンテンツを表示する

DIVにカーソルを合わせたときにコンテンツを表示することは可能ですか？ Image を参照してください

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;
}
htmlcsscss3stylesheetmousehover
11
Farhan Afzal

次のマークアップがあると仮定します。

<div id="parent">
    Some content
    <div id="hover-content">
        Only show this when hovering parent
    </div>
</div>

CSS：

#hover-content {
    display:none;
}
#parent:hover #hover-content {
    display:block;
}

これでうまくいくはずです。

トランジションをどのように使用するかはわかりませんが、少なくとも同じセレクターを配置する必要があります。

例

24
Anpan

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

<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);
}

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

0
Jacques ジャック

はい、可能です。

ただし、.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

0
Praveen

たとえば、このコンテキストがある場合：

<div class="flowingdown">
    <div class="something-inside">
        something-inside
    </div>
    <div class="something-inside-but-hidden">
        something-inside-but-hidden
    </div>
</div>

CSS

.something-inside-but-hidden {display:none}
.flowingdown:hover .something-inside-but-hidden {display:block}

作業例 jsFiddled here

0
Milche Patern