Lisa234 Lisa234 - 3 years ago 152
CSS Question

html Grow Hover

I want to get each box to grow larger when the mouse is on it. So far I have come up with this and it doesn't work.
This is my html code

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


and this is my css code. i have included only the ones i thought that would be relevant to the question.

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);
}


and this is how it looks likeenter image description here

Answer Source

You must add grow class to your <li> because it will not work on your anchor tag and just simply use this selector .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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download