我希望图像在另一个元素的状态发生变化时出现在 div 中，因此当调用 .main-menu: hover 时，我希望图像出现在#logo 中
<body><div class="area">
</div><nav class="main-menu"><div id="logo"></div><div id="logo_text"></div>
<ul>
<li>
<a href="#">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
UI Components
</span>
</a>
</li>
<li class="has-subnav">
<a href="#">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
Forms
</span>
</a>
</li>
</ul>
</nav>
</body>
.main-menu {
background:#3D3D3D;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
#logo {
position: relative;
text-align: center;
}
<script type="text/javascript">
document.getElementById("logo").style.display = "block";
document.getElementById("logo_text").style.display = "block";
</script>
<script type="text/javascript">
document.getElementById("logo").style.display = "none";
document.getElementById("logo_text").style.display = "none";
</script>
我知道 java 脚本可以工作，我只是不确定在调用 CSS 悬停时在哪里以及如何启动它。
我也尝试过使用:
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
content: url(image.PNG);
display: block;
}
它确实起作用，但在主菜单的 100% 处呈现图像:激活时悬停导航，因此如果有一种方法可以使用它来控制图像大小，那甚至可能是可预置的。
谢谢 詹姆斯
最佳答案
您可以在 after 或 before 中使用伪元素，您可以随意管理它们:
.main-menu:hover::after, nav.main-menu.expanded::after {
overflow:visible;
content: url(image.PNG);
display: block;
width: 100px;
margin-left: ....
}
如果您的脚本与您在此处编写的相同，则只有第二个脚本锁有效。
关于javascript - 使图像出现在 css hover 上的另一个 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42728806/