如何在悬停时更改响应div的宽度？

Question

我正在尝试创建一个响应式菜单，将其最小化，直到将鼠标悬停在该菜单上，然后使用ccs进行扩展。

当内容允许设置div宽度时，我可以在悬停时使div变小，但是当我将其设置为最大宽度并悬停时，它的行为会很奇怪并且不会扩展宽度。

HTML

<aside id="sidebar" class="right">

   <li id="nav_menu-11" class="widget widget_nav_menu">
      <h1>Myzone Related Pages</h1>
      <div class="menu-myzone-container">

      <ul id="menu-myzone" class="menu">
        <li id="menu-item-1236" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1236"><a href="xxx">How to Use MyZone</a></li>

        <li id="menu-item-1237" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1237"><a href="xxxx">myzone</a></li>

      </ul>
      </div>
   </li>
   <li id="video_widget-2" class="widget widget_video_widget"><h1>Myzone Video</h1>
      <div class="video-wrapper">   
      </div>
   </li>
</aside>

的CSS

#sidebar{
    display: block !important;
    position: fixed !important;
    width: 8% !important;   
    z-index: 100 !important;
}

#sidebar :hover {
    width: 50% !important;
}

#menu-myzone{
    max-width: 100%;        
}

.right h1 {
    font-size: 10px !important;
}

.menu-myzone-container ul li a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebar li {
    max-width: 100%;
    display:block;
    position: relative !important;
    height: 50px;
}

#video_widget-2{
    display:none !important;
    position: relative !important;
}


.widget_video_widget {
   width: 95%;
}

#sidebar h1{
   text-align: left !important; 
}

#sidebar li{
    list-style-type: none;
}

jsfiddle：

http://jsfiddle.net/k8wg9r9h/

Answer 1

过渡的基础是：

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
}

Answer 2

您需要删除'#sidebar'和'：hover'之间的空格。 像这样：

#sidebar:hover {
    width: 50%;
}

它对我有用（更改div的大小）。

Answer 3

div {
    width: 400px;
    height: 120px;
    background: red;
}

div:hover {
    width: 250px;
}