Question

我有一个带有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;
}

Answer 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;
}

Here's a fiddle

Answer 2

Css只能在DOM树中向下工作，你需要做的是

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

您的代码正在寻找的是img：hover。

下面的＃徽标文字

Answer 3

如果你的设计适应它，你会想要嵌套这两个：

这要求一个人成为另一个孩子的孩子：

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>

此外，您应该关闭图片代码。

将鼠标悬停在divA上以影响divB

3 个答案: