Question

我希望图像在另一个元素更改的状态下显示在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％处渲染图像：在活动时悬停导航，所以如果有一种方法可以控制图像大小，甚至可以预先设置。

由于詹姆斯

Answer 1

您可以使用pesudo alements after或before，然后根据需要管理它们：

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

如果您的脚本与您在此处写的相同，则只有第二个脚本锁可用。

Answer 2

使用您拥有的结构，您可以执行此操作。做以下测试：

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

1：在#logo标记内写一些内容。

2：将visibility: hidden;添加到#logo CSS属性中。

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

.main-menu：hover #logo {visibility：visible; }

因此，使用此功能，当您将.main-menu悬停时，#logo将会显示。
如果您需要#logo在开始时可见，那么将在#logo标记内放置可见的图像，并将隐藏的图像放在#logo标记内的特定类中，并使用：

.main-menu：hover #logo .yourClass {visibility：visible; }

显示新图片。

请注意，这只有效，因为在DOM树中，#logo标记位于.main-menu标记内。
如果它们在diferente树中，那么仅使用CSS是不可能的，并且需要javascript来更改某些类。

使图像显示在css悬停

2 个答案: