0

ここに私のHTMLがあります：

<div id="flexi-overlay">
        <a id="flexi-overlay-image-link-container" href="#" class="popup image-link"?>
            <img src="image.jpg" />
        </a>            
        <span id="flexi-overlay-text-container">
            <a href="#">
                <span class="flexi-link" id="title-1">Modern Duets</span>
                <span class="flexi-link" id="title-2"><em>Flexi Compilation</em></span>
                <span class="flexi-link" id="title-3"><strong>**New**</strong></span>
            </a>
        </span>
</div>

ページ下部のリンクにカーソルを合わせたときに、上部のリンクの画像の不透明度を下げたい。以下を実行してみましたが、うまくいきませんでした。

#flexi-overlay-text-container + #flexi-overlay-image-link-container {
    filter: alpha(opacity=60);
    opacity:.6;
}
4

1 に答える 1

1

次のように cssflexi-overlay-image-link-containerの子を作成して変更できます。flexi-overlay-text-container

#flexi-overlay-text-container:hover>#flexi-overlay-image-link-container {
    filter: alpha(opacity=60);
    opacity:.6;
}
#flexi-overlay-image-link-container:hover {
    filter: alpha(opacity=100) !important;
    opacity:1 !important;
}

jsフィドル

于 2013-05-18T09:44:48.993 に答える