我正在开发一个网站,里面有一个CSS阻止列表,有4行。当您将鼠标悬停在每一行上时,它会展开以显示该行的进一步说明。
我希望列表在网站加载后立即显示第一行,但当您将鼠标悬停在第2,3,4行时,它们会在何时展开。
这有意义吗?
CSS代码是:
#gallery{
padding:0;
margin:-10px 0 0 0;
list-style-type:none;
overflow:hidden;
width:228px;
height:270px;
border:4px solid #FFF000;
border-top:none;
background-color:#ED145A;
}
#gallery li a{
display:block;
height:30px;
width:218px;
text-decoration:none;
color:#FFF;
overflow:hidden;
padding-left:10px;
}
#gallery li a:hover{
background-color:#FFF000;
height:180px;
color:#333;
HTML是:
<ul id="gallery">
<li><a href="contact.html"><b>3 page website</b><br /><span class="spacer"> </span><br />
<span>including custom design to fit your requirements, domain name of your choice and free webspace (limits apply), all for one year, only £150.00 (ex.VAT). Terms and conditions apply.<i> Contact us for more info</i></span></a></li>
<li><a href="contact.html"><b>Start up business package</b><br /><span class="spacer"> </span><br />
<span>Packages include brand identity (logo design), print media (business cards, brochures, etc) and company website, starting from £300.00 (ex.VAT). <i>Contact us for more info</i></span></a></li>
<li><a href="contact.html"><b>Logo Design</b><br /><span class="spacer"> </span><br />
<span>Customized logo design starting from £35.00 (ex.VAT) - You will not find this price anywhere! <i>Contact for more info</i></span></a></li>
<li><a href="index.html"><b>More offers to come!</b><br /><span class="spacer"> </span><br />
<span>Please be sure to come back and visit this website as Ikonik Design are constantly reviewing and adding to this list!</span></a></li>