2

このような HTML 定義の一部があります。

<div id="photoindex" class="content">
    <div class="photocategory">
      <a href="/photo/clouds"><img src="img.jpg"></a>
      <h1><a href="/photo/clouds">Clouds</a></h1>
    </div>
</div>

h1は、画像がホバーされるまで非表示にする必要があります。ホバーすると、がh1表示され、img不透明度が減少します。私の現在の試みには、無視できないわずかな欠陥があります。

div#photoindex h1 {
    visibility: hidden;
}

div#photoindex h1:hover {
    visibility: visible;
}

div#photoindex img:hover {
    opacity: 0.7;
}

div#photoindex a:hover + h1 {
    visibility: visible;
}

div#photoindex h1:hover + a {
    opacity: 0.7;
}

これで、マウスを画像の上に置くh1と、画像が表示され、画像の不透明度が下がります。ただし、マウスを の上に移動するh1と、画像の不透明度が通常に戻ります。:first-childおよびセレクターを使用してみまし:last-childたが、うまくいかないようです。どちらにも適用しようとしてもうまくいきませんでした.photocategory。

div.photocategory:hover a {
    opacity: 0.7;
}

div.photocategory:hover h1 {
    visibility: visible;
}

これにより不透明度が変更されますが、 の可視性には明らかな影響はありませんh1。Javascriptなしでやりたいことはできますか? おそらく、別の HTML 構造の方がうまく機能するでしょうか?

4

2 に答える 2

1

.photocategory親divが崩壊していないと仮定すると、スタイルを適用するとうまくいくと思います。

div#photoindex div.photocategory:hover a {
    opacity: 0.7;
}

div#photoindex div.photocategory:hover h1 a {
    opacity: 1;
}

div#photoindex div.photocategory:hover h1 {
    visibility: visible;
}

div#photoindex div.photocategory h1 {
    visibility: hidden;
}

更新されたフィドル

于 2013-06-10T17:16:31.290 に答える
0

物事を行うためのより良い方法である可能性があるものを見つけました。が使用されている場合div.photocategory:hover、カーソルがその時点で画像上になくても、その要素にカーソルを合わせると効果が生成されます。これは、画像が全体を占める場所では問題photocategoryになりませんが、そうでない場所では問題が発生します。

h1主な問題は、実際には無視したい要素をアクティブにするマウスオーバーによって引き起こされました。この問題を解決するには、以下のようにpointer-eventsプロパティを使用できます。

div#photoindex div.photocategory h1 {
    position: absolute;
    visibility: hidden;
    margin: -40px 0 0 0;
    pointer-events: none;
}

div#photoindex div.photocategory a:hover {
    opacity: 0.7;
}

div#photoindex div.photocategory a:hover + h1 {
    visibility: visible;
}

この CSS は問題をより正確に表しており、結果はこの fiddleで見ることができます。設定pointer-events: none;により、ポインター イベントが の下の要素h1(この場合は要素) にドロップされるため、不透明度imgを変更するために追加の CSS は必要ありません。h1

このフィドルは、を使用した場合の問題を示していphotocategory:hoverます。画像の右側の空白にマウスを合わせると、ホバー イベントがアクティブになります。

于 2013-06-11T13:49:35.237 に答える