0

別のものにカーソルを合わせたときにimgを表示したいのですが、何も起こりません。コードを変更するために私ができることについてのアドバイス

**HTML**
 <div id="container-collection">

   <img class="clothes1" src="Images/smallest/JPEG/IMG_3148.jpg">

   <img class="closeup1" src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg">

 </div>

**CSS**

img.closeup1{
    display: none;
}

img.closeup1:hover clothes1 {
    display: block;
}
4

2 に答える 2

1

:hover@minitech が言ったように、制御された要素セレクターを所有者と適切に組み合わせる必要があります。

私は次のようなものに行きます：

HTML

<div id="container-collection">
    <div class="clothes1-wrap">
        <img class="clothes1" src="Images/smallest/JPEG/IMG_3148.jpg">
        <img class="closeup1" src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg">
    </div>
</div>

CSS

.closeup1 {
    display: none;
}

.clothes1-wrap:hover .closeup1 {
    display: block;
}

私にとっては、これは少しきれいに見えます。さらに、 imgs の間に要素を追加できます。

于 2012-05-18T23:22:40.920 に答える
1
  1. .クラスを選択するためのがありません。である必要があります.clothes1。
  2. コンビネータがありません。.clothes1の子孫ではありません.closeup1。しかし、残念ながら「前の兄弟」のコンビネータはまだ存在しません。CSS4 にはありますが、今はありません。

順序をシャッフルしても問題ない場合 (派手な CSS で位置の変更を修正できる場合があります)、次のようにできます。

<div id="container-collection">

    <img class="closeup1" src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg">

    <img class="clothes1" src="Images/smallest/JPEG/IMG_3148.jpg">

</div>

img.clothes1 {
    display: none;
}

img.closeup1:hover + .clothes1 {
    display: block;
}
于 2012-05-18T23:23:02.900 に答える