用文本交换图像(CSS或jQuery?)．

Swap image with text ( CSS or jQuery? )

本文关键字：jQuery CSS 文本 交换 图像      更新时间：2023-09-26

我正在尝试用鼠标悬停的文本交换图像徽标。

我一直在寻找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
}

你的小提琴更新了

更新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事件绑在链接上，而不是像你那样(悬停在图像和文本上)，图像和文本跨度是该元素的子元素。因此，当你将鼠标悬停在链接上时，特定的样式就会应用。

相关文章：