0

これは簡単な質問かもしれませんが、私はそれを機能させることに頭を悩ませているようには見えません。これが基本的な設定です（関連性がないため、すべてのポジショニングなどを見逃しました）：

<div id="wrapper">
<img class="album-pic-exit" src="images/exit.jpeg"> 
<img class="album-pic" src="images/blank.gif">
</div>

#wrapper.album-pic-exit { display:none; } 
#wrapper.album-pic:hover +.album-pic-exit { display:block }

基本的に、カーソルを「album-pic」に合わせると、「album-pic-exit」が表示されます。「..exit」をホバーの繰り返しのない背景にすることでこの作業を行うことができましたが、それは汚れているので、もっと簡単で簡単な解決策があるはずです。私はこれに比較的慣れていませんが、グーグルに頼るよりも自分自身を見て実験する方がうまくいくと信じているので、構文がすべて間違っていると悪いです。ps javascriptやjqueryではなく、cssのウォークスルーソリューションが必要です。

4

3 に答える 3

1

この方法でそれを行うことができます。ただし、次のように2つの画像の順序を切り替える必要があります。

<div id="wrapper">
  <img class="album-pic" src="images/blank.gif">
  <img class="album-pic-exit" src="images/exit.jpeg">
</div>

次に、このCSSを使用します。

.album-pic-exit {
  display: none;
}
.album-pic:hover + .album-pic-exit {
  display: inline;
}

まず、exit画像を。で非表示にしdisplay: noneます。次に、隣接する兄弟セレクターを使用して、他の画像にカーソルを合わせたときに画像+を選択します。exit

于 2012-08-29T18:49:44.283 に答える
1

多くの可能性 :) まず、CSS には後方セレクターがないため、CSS には次の HTML が必要になります。

    <div id="wrapper">
    <img class="album-pic" src="images/blank.gif">
    <img class="album-pic-exit" src="images/exit.jpeg"> 
    </div>

とにかく、これはより良いでしょう：

<div id="wrapper"></div>

    #wrapper {
              width:ALBUM_PIC_WIDTH;
              height:ALBUM_PIC_HEIGHT;
              background:url(ALBUM_PIC_URL) 0 0 no-repeat;
}

#wrapper:hover {
              background:url(ALBUM_PIC_EXIT) 0 0 no-repeat;
}

(もちろん、大文字の URL を入力してください。) コーディングの問題で 2 つの画像が必要な場合は、「javascript ロールオーバー チュートリアル」をググることもできます。

質問があれば聞いてください :) Cheerz Simon

于 2012-08-29T18:51:54.187 に答える
0

CSS3 を使用した素晴らしいホバー効果は、優れたチュートリアルです: .
CSS:


div.shadow {
    width: 300px;
    margin: 20px;
    border: 1px solid #ccc;
    padding: 10px;
    }
div.shadow:hover {
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    }

HTML: 


<div class="shadow">
Ut vulputate sem venenatis magna commodo ac semper nibh mollis. Pellentesque suscipit metus non lacus lacinia sed porttitor metus suscipit. Aenean egestas augue vel sem tincidunt scelerisque. Sed ullamcorper convallis arcu, vel euismod urna egestas in.
</div>
于 2012-08-29T18:46:40.950 に答える