如何编辑代码,以便即使鼠标不再悬停窗口也将保持打开状态,但在选择另一个窗口/类别时会关闭?
.verticalaccordion>ul {
margin: 0;
padding: 0;
list-style:none;
width: 500px;
}
.verticalaccordion>ul>li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
list-style:none;
height:40px;
width: 500px;
/* Decorative CSS */
background-color:#f0f0f0;
/* CSS3 Transition Effect */
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
}
.verticalaccordion>ul>li>h3 {
display:block;
margin: 0;
padding:10px;
height:19px;
/* Decorative CSS */
border-top:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color: #000;
background: #cccccc;
/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */
}
.verticalaccordion>ul>li>div {
margin:0;
overflow: auto;
padding:10px;
height:220px;
}
.verticalaccordion>ul>li:hover {
height: 280px;
}
.verticalaccordion:hover>ul>li:hover>h3 {
/* Decorative CSS */
color:#fff;
background: #000000;
/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */
}
.verticalaccordion>ul>li>h3:hover {
cursor:pointer;
}
<div class="verticalaccordion">
<ul>
<li>
<h3>Heading 1</h3>
<div>Content For Panel 1.</div>
</li>
<li>
<h3>Heading 2</h3>
<div>Content For Panel 2</div>
</li>
<li>
<h3>Heading 3</h3>
<div>Content For Panel 3.</div>
</li>
<li>
<h3>Heading 4</h3>
<div>Content For Panel 4</div>
</li>
</ul>
</div>
以下是上述代码的来源:Cross Browser Pure CSS3 Vertical Accordion