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

-1

我正在尝试创建一个响应式的sidemenu，它被缩小直到盘旋，然后使用ccs进行扩展。如何更改悬停时响应div的宽度？

当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/

来源

2014-09-03 David

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

#sidebar:hover { 
    width: 50%; 
}

它适用于我（改变div的大小）。

来源

2014-09-03 19:14:57 Mirjalal

不错的一个！谢谢！ – David 2014-09-03 20:56:11

不客气。 – Mirjalal 2014-09-04 05:05:23

过渡的基是这样的：

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; 
}

来源

2014-09-03 19:01:16

喜队友，这确实工作！我应该提到，如果可能，我一直在寻找响应式解决方案，但如果我无法获得解决方案，这是什么病使用。 – David 2014-09-03 19:06:37

'2s'的用途是什么？ – 2014-09-03 19:16:48

2秒代表2秒 – 2014-09-03 19:37:37

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

div:hover { 
    width: 250px; 
}

来源

2014-09-03 19:14:48 hy2224

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

回答

相关问题