0

こんにちは皆さん、css と html で問題が発生しました ( fiddle )

私の問題は、<div class="bcont"></div>の右側に、マウスが上にある<div class="square></div>ときに右から左にスクロールするスクリプトがあることです。だから、それを機能させるには、設定する必要がありますsquare <div>

.square{
  font-family: 'Lobster Two';
  background-color: rgba(196, 196, 193, 0.3);
  /* color: rgba(196, 196, 193, 0.3); */
  color: #000;
  width: 300px; 
  height: 160px; 
  margin:30px; 
  border: solid 10px #000; 
  position: relative;
  overflow: hidden;  /* this! */
}

そのため、 onbcont <div>内で移動した場合にのみ表示されます。しかし、「square」 div を設定すると、矢印 (「square:after」ルールによって作成された) が表示されず、私を殺しています。私の英語でごめんなさい。squaremuoseoveroverflow: hidden

皆さん、ありがとうございました ！

4

1 に答える 1

1

正方形のボックスにオーバーフロープロパティを指定せず、divを右から左にアニメーション化する代わりに、その幅をアニメーション化して、必要な効果を得ることができます。

$('#quotae').hover(function(){
  $(".bcont", this).stop().animate({width:'60px'},{queue:false,duration:300});
  }, function() {
  $(".bcont", this).stop().animate({width:'0px'},{queue:false,duration:300});
});

つまり、最初に幅を0に保ち、次に60ピクセルにします。それとともに、bcontdivに隠されたオーバーフローも追加する必要があります。

.bcont{
    position: absolute;
    top: 0;
    right: 0px; /* -60 */
    margin: 0;
    padding: 0;
    height: 100%;
    width: 0px;
    overflow:hidden;

}

http://jsfiddle.net/sudhanshu414/3sg5Y/10/を確認してください

于 2012-12-26T13:59:03.117 に答える