0

マウスホバー時に画像ロゴをテキストと交換しようとしています。

この移行を作成するためにjqueryとcssを調べてきましたが、解決策を見つけることができませんでした. 少しでもお役に立てれば幸いです。

これは私が立ち往生しているものです。

例 http://jsfiddle.net/VugzA/

HTML

<div id="logo">
<ul>
    <li>
        <a href="#home" title="Back to Home?">                        

            <span class="logo_icon">
                <img src="some.gif" alt="Logo image" width="45" height="55" />
            </span>

            <span class="text">Some Text</span>

        </a>
    </li>
</ul>
</div>

CSS

#logo ul {
list-style: none;
margin-left: -20px;
}

.logo_icon {
display: block;
} 

.logo_icon:hover {
display: none;
}

.text {
display: none;
}

.logo_icon:hover + .text {
display: block
}
4

1 に答える 1

4

これがフィドルの更新です

更新された html:

<div id="logo">
<a href="#home" title="Back to Home?">                        
<span class="logo_icon">
<img src="some.gif" alt="Logo image" width="45" height="55" />
</span>
<span class="text">Some Text</span>
</a>
</div>

および更新されたcss：

.logo_icon {
    display: block;
} 
.text {
    display: none;
}
#logo a:hover .logo_icon
{
    display:none;
}
#logo a:hover .text
{
    display:block;
}

私がここで行っているのはhover、あなたが行ったように (画像とテキストにカーソルを合わせる) のではなく、リンクでイベントを関連付けることです。画像とテキストのスパンはその要素の子です。したがって、リンクにカーソルを合わせると、特定のスタイルが適用されます。

于 2013-04-09T14:28:33.250 に答える