Javascript 使图像显示在css悬停的另一个div中

我希望在另一个元素的状态发生变化时，图像显示在div中，因此当调用主菜单：hover时，我希望图像显示在#logo中

它确实起作用，但在主菜单的100%处渲染了图像：活动时悬停导航，因此，如果有办法使用此功能控制图像大小，甚至可能是可预渲染的

谢谢

---

James

您可以在之后或

之前使用pesudo alements
，并且您可以随时管理它们：

.main-menu:hover::after, nav.main-menu.expanded::after {
    overflow:visible;
    content: url(image.PNG);
    display: block;
    width: 100px;  
    margin-left: .... 
}

如果您的脚本与您在此处编写的脚本相同，则只有第二个脚本锁起作用。
根据您现有的结构，您可以执行此操作。执行以下操作以进行测试：

0：从页面中删除您发布的这些javascripts代码

1:在
#徽标
标签内写些东西

2:添加
可见性：隐藏
到
#徽标
CSS属性

3:将此添加到CSS文件/块的末尾（您的示例）：

.主菜单：悬停#徽标{可见性：可见；}

因此，当您将鼠标悬停在
主菜单上时，
#徽标将可见。

如果您需要在开始时显示
#logo
，请将开始可见的图像放入
#logo
标记中，并将隐藏的图像m放入带有特定类的
#logo
标记中，然后使用：

。主菜单：悬停#徽标。yourClass{可见性：可见；}

展示新形象

请注意，这仅仅是因为在DOM树中，
#logo
标记位于
主菜单中。

如果它们位于不同的树中，则仅使用CSS是不可能的，并且需要javascript来更改某些类。
html在哪里？是否确实有效：
。主菜单：悬停{content:url（image.PNG）；}
？我对此进行了测试，但它似乎不起作用。尽管当图像显示在主菜单中时，图像太大，但它仍能正常工作。而不是它的预期位置的#徽标。不幸的是，这不起作用，因为我使用的内容属性没有使用img标记。图像是否显示在悬停状态？我对此进行了测试，但似乎不起作用。我认为
content
属性只在
：after
和
：：before
中起作用。不能将内容用于图像。您需要在html中定义它。或者作为背景。在100%时，它似乎对悬停有效，但是如果我尝试
transform:scale（.5）图像仅出现在
：：之后和
：：之前
@DannyvanHolten中，可以将图像用作内容。刚才我做了测试。但它必须在披索前后使用，而不是元素本身。
.main-menu:hover,nav.main-menu.expanded {

    width:250px;
    overflow:visible;
    content: url(image.PNG);
    display: block;

    }

.main-menu:hover::after, nav.main-menu.expanded::after {
    overflow:visible;
    content: url(image.PNG);
    display: block;
    width: 100px;  
    margin-left: .... 
}