Html 如何使元素在悬停时可见？

我不知道如何使父div的子级在hover上可见。我希望文本在其中一个字形图标悬停时能够轻松淡入，以显示与之对应的文本。我想让每个菜单项在鼠标悬停时轻松地滑出，但我不知道如何在css3中设置eases

@charset“utf-8”；
/*CSS文档*/
html{
显示：块；
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
身体{
显示：块；
填充：0；
保证金：0；
身高：100%；
宽度：100%；
背景色：rgba（36,36,36,1.00）；
背景图片：url（../img/bg.jpg）；
背景尺寸：封面；
背景附件：固定；
背景重复：无重复；
}
#博阿洛戈{
宽度：30%；
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
不透明度：0.7；
z指数：-1；
}
#主导航{
宽度：自动；
高度：自动；
位置：绝对位置；
最高：50%；
左：7em；
转换：翻译（-50%，-50%）；
利润率：20px；
}
#主导航ul{
位置：相对位置；
宽度：自动；
高度：自动；
列表样式：无；
填充：0；
利润率：10px；；
}
.占位符{
填充：10px；
高度：80px；
宽度：250px；
溢出：隐藏；
职位：相对
}
.占位符a img{
显示：块；
浮动：左；
右边距：10px；
}
.占位符{
宽度：自动；
高度：自动；
位置：相对位置；
浮动：左；
显示：内联块；
边缘顶部：20px；
颜色：#FFF；
字体系列：“腓特烈大帝”，衬线；
字体大小：30px；
文本对齐：左对齐；
}
.占位符：悬停{
}
.linkItem:悬停{
左侧填充：20px；
}
.linkItem{
高度：自动；
宽度：自动；
显示：块；
位置：相对位置；
浮动：左；
}
.linkItem img{
}
.linkItem跨度{
}
#博阿洛戈img{
高度：自动；
宽度：100%；
}
@媒体屏幕和屏幕（最大宽度：600px）{
/*处理智能手机的css*/
#博阿洛戈{
宽度：80%；
高度：自动；
}
#主导航{
}
}

野猪网页

css选择器应为：

.linkItem img:hover > span{
    /* your animation */
}

---

要获得淡入/淡出效果，可以将文本的不透明度设置为0，并在父对象悬停时将其更改为1

您还需要定义转换：

转换：所有1s轻松


所有-意味着每一个属性更改都会产生转换效果
1s-转换需要1秒
ease-转换计时功能

如果您想在悬停时获得不同的效果，则必须使用JavaScript

我在HTML中做了一些更改，使用类来设置元素的样式，不要使用内联样式（
style=“height:80px；width:80px；”
），它使代码更可读，更易于维护


@charset“utf-8”；
/*CSS文档*/
html{
显示：块；
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
身体{
显示：块；
填充：0；
保证金：0；
身高：100%；
宽度：100%；
背景色：rgba（36,36,36,1.00）；
背景图片：url（../img/bg.jpg）；
背景尺寸：封面；
背景附件：固定；
背景重复：无重复；
}
#博阿洛戈{
宽度：30%；
保证金：0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
不透明度：0.7；
z指数：-1；
}
#主导航{
宽度：自动；
高度：自动；
位置：绝对位置；
最高：50%；
左：7em；
转换：翻译（-50%，-50%）；
利润率：20px；
}
#主导航ul{
位置：相对位置；
宽度：自动；
高度：自动；
列表样式：无；
填充：0；
利润率：10px；
;
}
.占位符{
填充：10px；
高度：80px；
宽度：250px；
溢出：隐藏；
职位：相对
}
.占位符a img{
显示：块；
浮动：左；
右边距：10px；
}
.占位符{
宽度：自动；
高度：自动；
位置：相对位置；
浮动：左；
显示：内联块；
边缘顶部：20px；
颜色：#FFF；
字体系列：“腓特烈大帝”，衬线；
字体大小：30px；
文本对齐：左对齐；
}
.占位符：悬停{}
.linkItem:悬停{
左侧填充：20px；
}
.linkItem{
高度：自动；
宽度：自动；
显示：块；
位置：相对位置；
浮动：左；
}
.linkItem img{
高度：80px；
宽度：80px；
}
.linkItem跨度{
不透明度：0；
过渡：所有的1容易；
}
#博阿洛戈img{
高度：自动；
宽度：100%；
}
.linkItem：悬停范围{
不透明度：1；
}
@媒体屏幕和屏幕（最大宽度：600px）{
/*处理智能手机的css*/
#博阿洛戈{
宽度：80%；
高度：自动；
}
#MainNav{}
}

野猪网页












很酷的《魔兽世界》可能会重复，非常感谢！我绝对会考虑把这段代码放在第二位，你的想法是更难阅读和理解（回想一下，我想我把它放进去了，因为这些图像对它们所处的div没有反应）。