html 增长悬停

Question

我想让每个盒子在鼠标放在上面时变大。到目前为止，我已经想出了这个，但它不起作用。这是我的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);
}

这就是它的样子

Answer 1

您必须添加 grow 类到您的<li>因为它不会在你的 anchor 标签上工作，只需使用这个选择器 .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);
}

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