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 回答