我希望当鼠标放在上面时,每个盒子都会变大。到目前为止,我已经提出了这个并且它不起作用。 这是我的HTML代码
<div class="whole">
<div class="type">
<p>Assets</p>
</div>
<div class="plan">
<div class="content">
<ul>
<li><a href="" id="grow" onClick=window.open("Vehicles.php","Ratting","width=800,height=400,left=150,top=200,toolbar=0,status=0,scrollbars=yes,");>Vehicles</a></li>
<ol><a href="">Materials</a></ol>
</ul>
</div>
</div>
</div>
这是我的css代码。我只包括了我认为与问题相关的那些。
ul{
list-style: none;
font-size: 15px;
font-family:'Open Sans';
color: #9095aa;
padding: 0px;
margin: 0px;
}
li{
border-bottom: 1px solid #494a5a;
padding: 0px;
margin: 0px;
text-align: center;
height: 52px;
line-height: 52px;
}
ol{
/*border-bottom: 1px solid #494a5a;*/
padding: 0px;
margin: 0px;
text-align: center;
height: 52px;
line-height: 52px;
}
a{
font-size: 18px;
font-family:'Open Sans';
color: white;
text-decoration: none;
}
p{
font-family:'Open Sans';
font-weight: 590;
font-size: 2.5vw;
color: black;
text-align: center;
padding-top: 10px;
}
#grow{}
a.grow:hover
{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
的样子
答案 0 :(得分:1)
您必须将grow
类添加到<li>
,因为它不会对您的锚标记起作用,只需使用此选择器.grow:hover
。
ul {
list-style: none;
font-size: 15px;
font-family: 'Open Sans';
color: #9095aa;
padding: 0px;
margin: 0px;
}
li {
border-bottom: 1px solid #494a5a;
padding: 0px;
margin: 0px;
text-align: center;
height: 52px;
line-height: 52px;
}
ol {
/*border-bottom: 1px solid #494a5a;*/
padding: 0px;
margin: 0px;
text-align: center;
height: 52px;
line-height: 52px;
}
a {
font-size: 18px;
font-family: 'Open Sans';
/*color: white;*/
text-decoration: none;
}
p {
font-family: 'Open Sans';
font-weight: 590;
font-size: 2.5vw;
color: black;
text-align: center;
padding-top: 10px;
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
&#13;
<div class="whole">
<div class="type">
<p>Assets</p>
</div>
<div class="plan">
<div class="content">
<ul>
<li class="grow"><a href="" onClick=window.open( "Vehicles.php", "Ratting", "width=800,height=400,left=150,top=200,toolbar=0,status=0,scrollbars=yes,");>Vehicles</a></li>
<ol class="grow"><a href="">Materials</a></ol>
</ul>
</div>
</div>
</div>
&#13;