0

バックグラウンド チェック: 1. 最近、基本的な html と css に取り掛かりました。2. Javascript は使用できません。3. Web サイトを検索しましたが、一致するトピックが見つかりませんでした (または理解できませんでした)。4. z-index とホバーに関する漠然とした知識。5. オフライン ページ。Google Chrome を使用してページを表示します。メモ帳を使用して編集します。

私が欲しいもの： 5つの画像を水平方向に重ねる必要があります。たとえば、このコードでは、5 つの国旗 (すべてのリンクは同じサイズで、"left: px;" を使用して区別されます) を、ホバーしたときに 0.99999 のリンクの不透明度と 1.0 の不透明度で順番に互いに重なり合うようにしました。カーソルを合わせていない場合、画像は元のインデックスを変更する前の状態に戻る必要があります。

知識の制限により、完全に異なる代替手段よりもこのコードの変更を好むでしょう。

私がやったこと： 各画像にdivを使用し、各divとそれぞれのホバーにcssを作成しました[各imgのcssの作成に失敗した後（z-indexの問題の保持）]。これを行った後、ホバリングも機能しません。

問題: 1. ホバリング/不透明度が機能しない。2. ホバリング後に z-index が保持されない。

PSここでのアマチュア作業と質問に対するお詫び。

<html>
<head>
 <title>
  Europe: A never ending journey
 </title>
<style type="text/css">
div.mainRunner
  {
  position: absolute;
  }
div.transbox1
  {
   position: absolute;
   z-index: 1;
   top: 0px;
   left: 0px;
   opacity:0.99999;

  }
div.transbox1:hover
  {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  opacity:1.0;
  }

div.transbox2
  {
   position: absolute;
   z-index: 2;
   top: 0px;
   left: 80px;
   opacity:0.99999;

  }
div.transbox2:hover
  {
   position: absolute;
   z-index: 2;
   top: 0px;
   left: 80px;
   opacity:1.0;
  }
div.transbox3
  {
   position: absolute;
   z-index: 3;
   top: 0px;
   left: 160px;
   opacity:0.99999;

  }
div.transbox3:hover
  {
   position: absolute;
   z-index: 3;
   top: 0px;
   left: 160px;
   opacity:1.0;
  }
div.transbox4
  {
   position: absolute;
   z-index: 4;
   top: 0px;
   left: 240px;
   opacity:0.99999;

  }
div.transbox4:hover
  {
   position: absolute;
   z-index: 4;
   top: 0px;
   left: 240px;
   opacity:1.0;
  }
div.transbox5
  {
   position: absolute;
   z-index: 5;
   top: 0px;
   left: 320px;
   opacity:0.99999;

  }
div.transbox5:hover
  {
   position: absolute;
   z-index: 5;
   top: 0px;
   left: 320px;
   opacity:1.0;
  }

</style>
</head>
<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">
 <div class="mainRunner">
  <div class="transbox1">
   <a href="Italy.html"><img src="Italy.jpg" width="800" height="450"></a>
  </div>
 <div class="transbox2">
   <a href="France.html"><img src="France.jpg" width="800" height="450"></a>
 </div>
 <div class="transbox3">
  <a href="Germany.html"><img src="Germany.jpg" width="800" height="450"></a>
 </div>
 <div class="transbox4">
  <a href="Switzerland.html"><img src="Switzerland.jpg" width="800" height="450"></a>
 </div>
 <div class="transbox5">
  <a href="UnitedKingdom.html"><img src="United Kingdom.jpg" width="800" height="450"></a>
 </div>
 </div>
</body>
</html>
4

1 に答える 1

2

それが答えであるため、それを答えとして投稿します（そして私はいくつかのrep =を蓄積しようとしています）：

：hover状態の要素のz-indexを、前に表示する要素のz-indexよりも大きく設定します。

于 2012-07-25T23:23:37.383 に答える