Html 如何通过将鼠标悬停在其中一个元素上，将两个元素设置为不同的样式？没有JavaScript

我必须做一项任务，但我不能完成它。 不允许使用Javascript。 任务如下：

将鼠标悬停在图像或链接上时，请执行以下操作：

• 使图像不透明度：0.4
• 使链接文本颜色为黄色

我这样做是为了当你将鼠标悬停在图像上时，这些规则会被应用。但是当我把鼠标悬停在一个链接上时，我似乎不能达到同样的效果

我必须改变元素的结构吗？
我必须使用

：而不是
伪类吗？

我想知道在没有Javascript的情况下是否有可能做到这一点


正文{
字体大小：1.2米；
字体大小：粗体；
}
.卡片{
宽度：150px；
}
.形象{
高度：80px；
背景色：番茄；
}
.说明{
高度：80px；
背景色：柠檬黄；
}
.image:hover~.description.link，
.link:悬停{
颜色：#ff0；
}
.图片：悬停{
不透明度：0.4；
}

img
使用连续集合。
运行此代码段，并告诉我这是否是您想要的：


正文{
字体大小：1.2米；
字体大小：粗体；
}
.卡片{
宽度：150px；
}
.形象{
高度：80px；
背景色：番茄；
}
.说明{
高度：80px；
背景色：柠檬黄；
}
.image:hover~.description.link，
.link:悬停{
颜色：#ff0；
}
.图片：悬停{
不透明度：0.4；
颜色：#ff0；
}
.说明：悬停{
不透明度：0.4；
}

img
使用连续集合。
这里有一个指针事件解决方案，它不会改变html的结构，并且尊重：如果您查看描述，请悬停“无”：

.card {
    pointer-events: none;
}
.image, .link{
  pointer-events: auto;
}

设置
：在整个
卡上悬停
：

.card:hover .description .link {
    color: #ff0;
}
.card:hover .image {
    opacity: 0.4;
}

演示

正文{
字体大小：1.2米；
字体大小：粗体；
}
.卡片{
宽度：150px；
指针事件：无；
}
.image，.link{
指针事件：自动；
}
.形象{
高度：80px；
背景色：番茄；
}
.说明{
高度：80px；
背景色：柠檬黄；
}
.card:hover.description.link{
颜色：#ff0；
}
.卡：悬停.图像{
不透明度：0.4；
}

img
使用连续集合。
这已经在工作了。将鼠标悬停在链接上，它会正确地改变颜色。如果你想要一个单独的悬停功能，然后将它们插入到一个分区中，你只需将
.card
作为链接，这将是一个简单的解决方法。@SteveTomlin，你没有正确阅读：“但我在链接上悬停时似乎无法达到相同的效果。”问题是，你所说的相同效果是什么意思？皮特在第一次听到指针事件时提出了最佳解决方案。非常感谢。