0

ホバーした画像のテキストのみを表示したいのですが、ホバーした画像の隣 (左/右) のグレーのスペースにある必要があります (グレーのスペースの外側の画像の下ではありません)。

それはcssだけで可能ですか？

そうでない場合、何が必要ですか？ジャバスクリプト？

HTML

<div class="pictures">
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
    <div class="pic">
        <img class="inner-img" src="http://www.csstutorial.net/wp-content/uploads/2010/01/045.png"/><p>This is a beautiful flower!</p>
    </div>
</div>

CSS

.pictures {
    background-color:rgba(25, 25, 25, 0.3);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    --width: 960px;
    float:left;
    margin: 0 auto;
    position:relative;
    left:100px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
.pictures:hover {
    left:40px;
}
.pic {
    width:100px;
    height:100px;
    float:left;
    margin:5px;
    position: relative;
    right: 0;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    background-color:rgba(25, 25, 25, 0.7);
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    color:blue;
    border-radius: 3px;
    /*abgerundete Ecken*/
}
.pic:hover {
    width:210px;
    height:210px;
    margin:5px 115px 0px -105px;
    right: -110px;
}
.inner-img {
    width:100%;
}

jsFiddleの作業例。

4

1 に答える 1

1

さて、ここでいくつかのこと：

  1. 画像が大きすぎます。透明なピクセルが含まれているため、テキストが濃い灰色のボックスからはみ出してしまいます。画像を必要なだけ大きくしてから、パディングなどを使用してコンテナ要素にネストして、同様の効果を実現します。
  2. あなたが探している効果が、ホバーするまでテキストを表示しないことである場合は、はい. テキストに adisplay:noneを追加してから、次のようなセレクターを追加する.image-container:hover p { display:inline-block; }か、css3 opacity を使用してフェードインすることもできますが、すでにスケールアップしているので見苦しくなりますが、おそらくフェードインしたくありません。
  3. 希望する効果が上記のものではない場合は、jQuery を使用して簡単に達成できます。すべてのテキストを表示したい場合、ホバー時に他のすべての画像のテキストを消したいとします。$('.image-container').hover(function(){//hide all text but the text nested in current element receiving the hover event });

特定の実装に関して質問がある場合はお知らせください。開始するには問題ありません。

于 2013-01-18T16:27:37.117 に答える