0

基本的に、異なる色の 5 つの縦縞で構成されたページがあります。これらは最終的に、別のセクションなどへのリンクになります。

私が話していることの一般的なアイデアを得るには、このフィドルをチェックしてください: http://jsfiddle.net/nolbear/4fea3/

これが私のJavaScriptです：

$('#banner1').hover(function() {
  $(this).toggleClass('forty');
  $('#banner2').toggleClass('twenty');
  $('#banner3').toggleClass('twenty');
  $('#banner4').toggleClass('ten');
  $('#banner5').toggleClass('ten');     
});

一番上のストライプにカーソルを合わせると、それが大きくなり、それを補うために他のすべてのストライプが小さくなるようにしようとしています。ストライプは常にページの高さ全体を占める必要があります (そのため、パーセンテージを使用しています)。

私が書いたコードが機能しない理由がわかりません。回答済みの他の StackOverflow の質問から直接取得しましたが、それでも機能しません。

4

2 に答える 2

1

最初の問題は、フィドルで jQuery を設定していないことです

次に、クラス値をオーバーライドする id で高さを設定するので、代わりにクラスごとにスタイルを設定しました。

http://jsfiddle.net/4fea3/4/

<div id="banner1" class="banner">
</div>

<div id="banner2" class="banner">
</div>

<div id="banner3" class="banner">
</div>

<div id="banner4" class="banner">
</div>

<div id="banner5" class="banner">
</div>

.banner {
    width: 100%;
    height: 20%;
    transition: all 0.2s ease 0.0s;
    -moz-transition: all 0.2s ease 0.0s;
    -webkit-transition: all 0.2s ease 0.0s;
    -o-transition: all 0.2s ease 0.0s;
    -ms-transition: all 0.2s ease 0.0s;
    overflow: hidden;
}
于 2013-07-28T03:28:30.057 に答える
0

コードは機能しています。機能していないのは css だけです。height: 20%各バナーに適用してからheight: x%、バナーの高さを変更したい各 css クラスに適用しました。残念ながら、最初のものheight: 20%はこれをオーバーライドします。私は!importantフィドルでそれを修正するために使用しました：http://jsfiddle.net/4fea3/3/

理想的には!important、クラスが追加されたときに、を回避し、スタイリングを更新して正しくオーバーライドすることをお勧めします。

于 2013-07-28T03:28:18.247 に答える