Html CSS：将鼠标悬停在链接上，但不显示图像

实际上，当我悬停这些链接时，当第一个悬停选择器被正确执行时，所有链接都会变成绿色。但是，对于最后一个链接“cde”，我调用另一个悬停选择器来显示图像，它不起作用

我所尝试的：

• 设置原始不透明度为0--悬停不透明度为1-->不起作用
• 设置原始显示=无--悬停显示=块-->不起作用

问题：有没有办法让文本变为绿色的图像出现？

非常感谢您的帮助。非常感谢

a:悬停{
颜色：#61c261；
}
.cde pic{
位置：相对位置；
宽度：-100px；
顶部：-100px；
浮动：对；
可见性：隐藏；
}
.cde:hover.cde图片{
位置：相对位置；
左：-20px；
能见度：可见；
}

abc bcd cde

问题是css选择器不能以纯css中的父对象为目标，您可以以兄弟或子对象为目标，但不能以父对象（纯css）为目标

CSS选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS3中有四种不同的组合器： 有关子/兄弟选择器的更多信息，您可以在此处阅读（2分钟阅读）

解决方案1：

和

是兄弟姐妹。因此，使用

li

鼠标悬停代替class

cde

，然后您可以针对

cde pic

类：

li:hover ~ .cde-pic {
  position: relative;
  left: -20px;
  visibility: visible;
}

。工作abcde a:悬停{
颜色：#61c261；
}
.cde pic{
位置：相对位置；
宽度：-100px；
顶部：-100px；
浮动：对；
可见性：隐藏；
}
李：悬停+.cde图片{
位置：相对位置；
左：-20px；
能见度：可见；
}

abc bcd cde

问题是css选择器不能以纯css中的父对象为目标，您可以以兄弟或子对象为目标，但不能以父对象（纯css）为目标

CSS选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS3中有四种不同的组合器： 有关子/兄弟选择器的更多信息，您可以在此处阅读（2分钟阅读）

解决方案1：

和

是兄弟姐妹。因此，使用

li

鼠标悬停代替class

cde

，然后您可以针对

cde pic

类：

li:hover ~ .cde-pic {
  position: relative;
  left: -20px;
  visibility: visible;
}

。工作abcde a:悬停{
颜色：#61c261；
}
.cde pic{
位置：相对位置；
宽度：-100px；
顶部：-100px；
浮动：对；
可见性：隐藏；
}
李：悬停+.cde图片{
位置：相对位置；
左：-20px；
能见度：可见；
}

abc bcd cde

您使用的此选择器

.cde:hover .cde-pic { ... }

---

…无法工作，因为

.cde pic

不是您使用的此选择器的子元素

.cde

.cde:hover .cde-pic { ... }

…无法工作，因为

.cde pic

不是

.cde

的子元素，请尝试以下操作：

。工作abcde a:悬停{
颜色：#61c261；
}
.cde pic{
位置：相对位置；
顶部：-100px；
浮动：对；
显示：无；
}
.cde:悬停：之后{
内容：url（“//images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png”）；/*不需要qoutes*/
位置：相对位置；
显示：块；
左：-20px；
}

abc bcd cde

尝试以下操作：

。工作abcde a:悬停{
颜色：#61c261；
}
.cde pic{
位置：相对位置；
顶部：-100px；
浮动：对；
显示：无；
}
.cde:悬停：之后{
内容：url（“//images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png”）；/*不需要qoutes*/
位置：相对位置；
显示：块；
左：-20px；
}

abc bcd cde

使用JS的解决方案。。。 代码如下：

功能chbg（vis）{
document.getElementById（'cde'）.style.visibility=vis
}

。工作abcde a:悬停{
颜色：#61c261；
}
.cde pic{
位置：相对位置；
浮动：对；
可见性：隐藏；
}
.cde:hover.cde图片{
位置：相对位置；
左：-20px；
能见度：可见；
}
a:hover>.cde图片{
能见度：可见；
}

abc bcd cde

使用JS的解决方案。。。 代码如下：

功能chbg（vis）{
document.getElementById（'cde'）.style.visibility=vis
}

。工作abcde a:悬停{
颜色：#61c261；
}
.cde pic{
位置：相对位置；
浮动：对；
可见性：隐藏；
}
.cde:hover.cde图片{
位置：相对位置；
左：-20px；
能见度：可见；
}
a:hover>.cde图片{
能见度：可见；
}

abc bcd cde

HTML有一个错误：div不在

中。此外，您永远不会更改悬停时的宽度；也许这就是问题所在。“这幅画有多大？”李斯特先生非常感谢你的评论。对我移动了

的内部，并按照下面提供的解决方案进行操作！它起作用了！HTML有一个错误：div不在

中。此外，您永远不会更改悬停时的宽度；也许这就是问题所在。“这幅画有多大？”李斯特先生非常感谢你的评论。对我移动了

的内部，并按照下面提供的解决方案进行操作！它起作用了！JavaScript在这种情况下太过分了。非常感谢，他肯定会这样做