Css懸停效果有問題？

Question

當我將鼠標懸停在我班的第一張圖片上時，它會影響我的班級第二張圖片，我該如何解決這個問題？

.body{margin:0 auto;width:100%;clear:both;} 
 
    .topPart{background-color:#7FFFD4;height:220px;width:1264px;margin:0px 0px 0px 0px;overflow: visible;} 
 
    .topPart ul li {position: relative;list-style:none;float:left;display:inline;} 
 
    .imgOne{height: 120px;width: 120px;border-radius:60px; border-style:solid;border-color:white;margin:-25px 30px 0px -5px;position: relative;} 
 
    .imgOne:hover{border-radius:5%;height:130px;} 
 
    .imgTwo{height: 120px;width: 120px;border-radius:60px;border-style:solid;border-color:white;position: relative;}

<div><div class="topPart"><h2><a href="#">Top</a></h2> 
 
     <ul class="first"> 
 
     <li><a href="#"><img class="imgOne" src="img/3.gif"></a></li> 
 
     <li><a href="#"><img class="imgOne" src="img/2.gif"></a></li> 
 
     <li><a href="#"><img class="imgOne" src="img/4.gif"></a></li> 
 
     <li><a href="#"><img class="imgOne" src="img/5.gif"></a></li> 
 
     <li><a href="#"><img class="imgOne" src="img/6.gif"></a></li> 
 
     <li><a href="#"><img class="imgOne" src="img/17.gif"></a></li> 
 
     <li><a href="#"><img class="imgOne" src="img/18.gif"></a></li> 
 
     <li><a href="#"><img class="imgOne" src="img/19.gif"></a></li></ul> 
 
     <ul class="second"> 
 
     <li ><a href="#"><img class="imgTwo" src="img/11.gif"></a></li> 
 
     <li><a href="#"><img class="imgTwo" src="img/12.gif"></a></ul></li></div></div>

Answer 1

試試這個

請改變你的height:130px到height:120px

.body{margin:0 auto;width:100%;clear:both;} 
    .topPart{background-color:#7FFFD4;height:220px;width:1264px;margin:0px 0px 0px 0px;overflow: visible;} 
    .topPart ul li {position: relative;list-style:none;float:left;display:inline;} 
    .imgOne{height: 120px;width: 120px;border-radius:60px; border-style:solid;border-color:white;margin:-25px 30px 0px -5px;position: relative;} 
    .imgOne:hover{border-radius:5%;height: 120px;} 
    .imgTwo{height: 120px;width: 120px;border-radius:60px;border-style:solid;border-color:white;position: relative;} 

Updated Demo

Answer 2

將鼠標懸停高度從120px更改爲130px這就是爲什麼它影響其他

.body { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    clear: both; 
 
} 
 
.topPart { 
 
    background-color: #7FFFD4; 
 
    height: 220px; 
 
    width: 1264px; 
 
    margin: 0px 0px 0px 0px; 
 
    overflow: visible; 
 
} 
 
.topPart ul li { 
 
    position: relative; 
 
    list-style: none; 
 
    float: left; 
 
    display: inline; 
 
} 
 
.imgOne { 
 
    height: 120px; 
 
    width: 120px; 
 
    border-radius: 60px; 
 
    border-style: solid; 
 
    border-color: white; 
 
    margin: -25px 30px 0px -5px; 
 
    position: relative; 
 
} 
 
.imgOne:hover { 
 
    border-radius: 5%; 
 
    height: 120px; 
 
} 
 
.imgTwo { 
 
    height: 120px; 
 
    width: 120px; 
 
    border-radius: 60px; 
 
    border-style: solid; 
 
    border-color: white; 
 
    position: relative; 
 
}

<div> 
 
    <div class="topPart"> 
 
    <h2><a href="#">Top</a></h2> 
 
    <ul class="first"> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="imgOne" src="img/3.gif"> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="imgOne" src="img/2.gif"> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="imgOne" src="img/4.gif"> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="imgOne" src="img/5.gif"> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="imgOne" src="img/6.gif"> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="imgOne" src="img/17.gif"> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="imgOne" src="img/18.gif"> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="imgOne" src="img/19.gif"> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    <ul class="second"> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="imgTwo" src="img/11.gif"> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <img class="imgTwo" src="img/12.gif"> 
 
     </a> 
 
    </ul> 
 
    </li> 
 
    </div> 
 
</div>