Css悬停效果有问题？

Question

当我将鼠标悬停在我的班级第一张图片上时，它影响了我的班级第二张图片，我如何解决这个问题？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

当悬停高度时，120px变为130px，这就是影响他人的原因

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

请将您的 <array> <dict> <key>Device</key> <string>Smartphones</string> <key>Comp</key> <array> <dict> <key>Company</key> <string>Apple</string> </dict> <dict> <key>Company</key> <string>Samsung</string> </dict> </array> </dict> <dict> <key>Device</key> <string>Notebooks</string> <key>Comp</key> <array> <dict> <key>Company</key> <string>HP</string> </dict> <dict> <key>Company</key> <string>Dell</string> </dict> <dict> <key>Company</key> <string>Lenovo</string> </dict> </array> </dict> </array> </plist> 更改为height:130px

height:120px

Updated Demo