1

私は、この質問が 100 回聞かれたことを知っており、最後の 1 つも読みました。

リンクにもなる画像があります。画像をホバーすると新しい画像が表示され、リンクがホバーされたときに画像の横にポップアップしたい小さな段落の説明があります。シンプルですね。

私がしていることは私にとって理にかなっており、この質問に対する答えです。私は何を間違っていますか？これは非常に簡単に思えます。

ホバリング時に画像にテキストを表示する方法は?

関連するコードを貼り付けます。投稿されたリンクの回答と比較すると、imgWrapper の代わりに project1 クラスがあり、imgDescription の代わりに NovelDescrip があります。

HTML

<div class="project1">
        <a href="#"><img id="novel" src="img/newnovel.png" onmouseover="this.src='img/newnovelblue.png'" onmouseout="this.src='img/newnovel.png'" /></a>

        <p class="novelDescrip" >A website for a local musician to market, stream, and distribute music and merchandise.</p>

</div>

CSS

.project1 p {
    width: 25%;
    margin: 20px 15px 0 0;
    float: right;
}

.novelDescrip {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: visibility opacity 0.2s;
}

.project1:hover .novelDescrip {
    visibility: visible;
    opacity: 1;
}

編集

ここに私の問題があります。テキストは非表示になり、表示されますが、この画像に描いた長方形で囲まれた領域にマウスがホバリングしているときはいつでもホバーがアクティブになります。なぜこれが起こっているのかについてのアイデアはありますか?

ここに画像の説明を入力

4

2 に答える 2

0

ポジションは必要ありません。top:0;left: 0;絶対配置の div は常にブラウザーの左上隅に表示されます。画像の横に div を表示するためのdisplay:inlineも追加されました。novelDescrip

.project1 p {
    width: 25%;
    margin: 20px 15px 0 0;
    float: right;
}

.novelDescrip {
    position: absolute;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: visibility opacity 0.2s;
    display:inline;
}

.project1:hover .novelDescrip {
    visibility: visible;
    opacity: 1;
}

これがあなたが探しているものであることを願っています。

于 2013-10-25T04:01:00.880 に答える