-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

1

鉴于您的标记，您可能只想让用户将鼠标悬停在 h1 上以触发动画。

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

这是一个小提琴。

于 2013-07-14T17:41:58.773 回答
0

Css 仅在 DOM 树中向下工作，您需要做的是

.site-title:hover img.anim{opacity: 1;}

您的代码正在寻找的是 img:hover 下的#logo-text。

于 2013-07-14T17:39:01.680 回答
0

如果您的设计适合它，您将需要嵌套这两个：

这要求一个是另一个的孩子：

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