[英]How to change width of responsive div on hover?
I am trying to create a reponsive sidemenu which is minified until hovered over and then it expands using ccs. 我正在尝试创建一个响应式菜单,将其最小化,直到将鼠标悬停在该菜单上,然后使用ccs进行扩展。
When the div width is allowed to be set by the contents, i can make the div smaller on hover, but when i set it as a max-width and hover it behaves strangely and dosen't expand width. 当内容允许设置div宽度时,我可以在悬停时使div变小,但是当我将其设置为最大宽度并悬停时,它的行为会很奇怪并且不会扩展宽度。
Html 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 的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: jsfiddle:
The base of the transition is this: 过渡的基础是:
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;
}
You need remove the whitespace between '#sidebar' and ':hover'. 您需要删除'#sidebar'和':hover'之间的空格。 Like this:
像这样:
#sidebar:hover {
width: 50%;
}
And it works for me (changing size of the div). 它对我有用(更改div的大小)。
div {
width: 400px;
height: 120px;
background: red;
}
div:hover {
width: 250px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.