-1

アイコンとテキストの 2 つの div を持つロゴがあります。デフォルトでは、テキストは非表示になっており、ユーザーがマウスをアイコンの上に置いたときにのみ表示されます。残念ながら、それは機能していません。

これは私のHTMLコードです:

<h1 class="site-title"><a href="http://localhost/themes/" rel="home">
    <div id="logo-icon">
        <img src="http://localhost/themes/wp-content/theme/img/logo_icon.png" class="anim">
    </div>
    <div id="logo-text">
        <img src="http://localhost/themes/wp-content/theme/img/logo_text.png" class="anim">
    </div>
</a></h1>

CSS:

#logo-text, #logo-icon {
    display: inline;
    float: left;
}
#logo-text img.anim {
    opacity: 0;
}
#logo-icon img:hover #logo-text img.anim {
    opacity: 1;
}
4

3 に答える 3

0

あなたのデザインがそれに対応している場合は、これらの 2 つをネストする必要があります。

これには、一方が他方の子である必要があります。

logo-icon img:hover #logo-text img.anim

したがって、DOM の場合は次のようになります。

<h1 class="site-title"><a href="http://localhost/themes/" rel="home">
    <div id="logo-icon">
        <img src="http://localhost/themes/wp-content/theme/img/logo_icon.png" class="anim" />
        <div id="logo-text">
            <img src="http://localhost/themes/wp-content/theme/img/logo_text.png" class="anim" />
        </div>
    </div>    
</a></h1>

また、イメージ タグを閉じる必要があります。

于 2013-07-14T17:39:12.500 に答える