3

左に飛び出すホバーパネルエフェクトを作成しようとしていますが、いくつか問題があります。作ろうとしている効果の画像を添付しました。

ここに画像の説明を入力してください

私がCodePenで作り直そうとしていることの例があります。それをチェックしてください：http：
//codepen.io/anon/pen/CgKqs

私はこれを理解できないので、今日は完全な精神的障害を抱えているに違いありません。私の目的は、CSSのみのこととして、JavaScriptなしでこれを行うことです。「ポップアウト」を正しく配置するのに本当に問題があります。

具体的な問題は次のとおりです。

  1. ホバー（デフォルトの状態に戻る）すると、IEでアイテムが消えます。
  2. ホバーされた「ポップアウト」は、水平スクロールバーを強制的に表示します。

ある種の忍者のようなHTML/CSSの天才は手を貸すことができますか？

ありがとう、

アダム。

4

4 に答える 4

3

これがあなたが望むものです：

/* Galerie */
.galerie { float:right; height:440px; width:160px; padding:10px; 
           background-color:grey; }

/* Content boxes here */
.cont { float:right; height:130px; width:150px; padding:4px; margin-top:4px; 
background-color:grey;  border:1px solid #000; border-radius:16px 16px 16px 16px; }

/* Dont display the text until hover */
.txt { float:left; width:53%; display:none; }

/* There is 4px padding between img and content div so for a fitting look 
   radius of image should be 16 - 4 = 12px */    
.pic { float:right; display:block; }
.pic img { height:130px; width:150px; border-radius:12px 12px 12px 12px; }

/* On Hover */
.cont:hover { width:320px; background-color:white; }
.cont:hover .txt { display:block; }
<div class="galerie">
    <div class="cont">
        <div class="pic"><img src="http://image.shutterstock.com/display_pic_with_logo/140095/140095,1310613638,1/stock-photo-team-work-ants-constructing-bridge-80955316.jpg"></div>
        <div class="txt">
            This is the text of content
            and some more text to see
            and a little more text..
        </div>
    </div>
    <div class="cont">
        <div class="pic"><img src="http://image.shutterstock.com/display_pic_with_logo/51333/51333,1199715661,1/stock-photo-young-puppy-listening-to-music-on-headphones-8323504.jpg"></div>
        <div class="txt">
            This is the text of content
            and some more text to see
            and a little more text..
        </div>
    </div>
    <div class="cont">
        <div class="pic"><img src="http://image.shutterstock.com/display_pic_with_logo/57421/57421,1154123042,1/stock-photo-four-penguins-in-antarctica-1607229.jpg"></div>
        <div class="txt">
            This is the text of content
            and some more text to see
            and a little more text..
        </div>
    </div>
</div>

編集：新しいフィドルリンクが追加されました。

https://jsfiddle.net/BerkerYuceer/sd8mLajr/

必要に応じて、これらのコンテンツdivをリンクに変換できます。

于 2012-10-03T14:54:35.520 に答える
1

疑似クラスが機能するためdisplay: blockにa要素が必要なため、codepenに配置したコードは機能しません。hover

.thingie li a {
  display: block;
    padding: 3px;
}
于 2012-10-03T15:00:51.157 に答える
1

私が提案するかもしれません。まず、ホバーせずに、幅を狭めて使用することにより、余分なコンテンツをクリップします

overflow:hidden

cssホバーで幅を大きくして、ボックス全体を表示したり、オーバーフローしたコンテンツを表示したりします。

yourSelector{
   width:200px;
   overflow:hiddden;
}

yourSelecto:hover{
   overflow:visible;
   width:400px 
}

この効果を実現するには、スタイリングの幅と残りの部分を慎重に選択してください。javascriptを学んでいないときは、この方法でスクロールダウンメニューを作成していました。

于 2012-10-03T15:01:50.620 に答える
1

この魔法は通常、CSSスタイルへのホバー属性を使用して行われます。

2つのスタイルを定義します。1つは通常用で、もう1つはホバー用です。ユーザーが特定のオブジェクトにカーソルを合わせると、そのオブジェクトにカーソルを合わせると自動的に有効になります

このような

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

ホバーには、必要な数の属性を適用できます。

これは、疑似クラスとも呼ばれます。

このリンクを見てください

http://www.w3schools.com/css/css_pseudo_classes.asp

于 2012-10-03T14:35:59.123 に答える