Question

我正在尝试在鼠标悬停时将图像徽标与文本交换。

我一直在寻找jquery和css来创建这种转换，但是我找不到解决方案并不幸运。希望你能帮助我一点。

这就是我所坚持的。

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
}

Answer 1

以下是对fiddle

的更新

更新了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事件，而不是像你一样（悬停在图像和文本上），图像和文本范围是该元素的子元素。因此，当您将鼠标悬停在链接上时，将应用特定样式。

用文本交换图像（CSS或jQuery？）

1 个答案: