Html 显示div#2，同时将相对div#1悬停在一个容器中并具有易位效果

我对此有一个小问题： 我想做以下几点

图像徽标将被隐藏，直到用户将鼠标悬停在
主图像上。我还想为
图像徽标
设置另一个悬停效果，同时保留
主图像
悬停效果

仅限CSS/HTML/JS解决方案

谢谢
这是您需要的jQuery函数。不要忘记在标题中声明jQuery

jQuery（文档）.ready（函数（$）{
$（“.main image”）。悬停(
函数（）{
$（“.logo image”）.css（'display'，'block'）；
}, 
函数（）{
$（“.logo image”）.css（'display'，'none'）；
}
);
$（“.logo图像”）。悬停(
函数（）{
$（“.logo image”）.css（'display'，'block'）；
},
函数（）{
$（“.logo image”）.css（'display'，'none'）；
}
);
});

这是jQuery悬停效果的一个示例。如果你还需要什么，请告诉我

编辑：我修复了一个当你悬停时发生的小错误。logo image
这个答案基于作者在查看附加代码后推断出的意图

不能同时悬停两个同级，但悬停会导致延迟恢复

。徽标图像{
不透明度：0；
过渡：不透明度10000s，框阴影2s；
}
.主图像：悬停+.徽标图像{
不透明度：1；
过渡：不透明度1s；
}
.徽标图像：悬停{
盒影：0.1米2米rgba（0,0,0,5）；
}

.logo image
上的转换延迟将使其第二个状态保持10000秒。这个数字是任意选择的-我们只需要它持续一段时间

因此，您只需将
.main image
元素悬停，然后显示其同级。同级有自己的
：hover
状态，然后可以与之交互

小提琴：

很好的警告，这是一次黑客攻击。我不建议你依赖这样的方法。相反，确定您希望实现的效果，并进行适当的标记/脚本更改，以适当满足该需求

这个答案仅仅是一个演示，在某种程度上，这在CSS中是可能的。
你不能同时悬停
.image logo
和
.main image
。好吧，有没有办法让它正确，例如使用背景图像？我不确定你想要达到什么效果；我在下面提供了一个建议作为答案。谢谢，我不是jQuery的超级粉丝。使用js或使用背景图像而不是主图像有什么可能性吗？我现在看不到仅仅使用背景图像的方法。让我想一个bitI只想创建一个框（图像），当鼠标悬停在上面时，它会显示按钮（在其中）。没错！但我想要一个悬停效果的背景图像。只是使用了背景图像而不是绝对值。当元素处于
：hover
状态时，是否要更改元素的
background
属性？如果是这样的话，你应该可以通过我上面提供的代码来实现。我已经解决了。谢谢