Question

我这里有这个代码：

#mg1 {
  margin-left: 3%;
}
#mg1:hover {
  margin-top: 4%;
}

<div id="section1">
  <center>
    <div id="bgp">
      <center>
        <p>THUMBNAILS</p>
      </center>
    </div>
  </center>
  <br>

  <img src="321321321321.png" width="200" height="150" id="mg1">
  <img src="ewqfh.png" width="200" height="150" id="mg2">
  <img src="2321321.png" width="200" height="150" id="mg3">

</div>

悬停效果应仅影响id =“mg1”的图像，但它会影响我的所有图像;为什么会这样？

Answer 1

＆＃13;

#mg1{
margin-left:3%;
position:relative;
}

#mg1:hover{
 
margin-top:4%;
}
   
img{

  float:left;
  
}

＆＃13;

<div id="section1">
       <center><div id="bgp"><center><p>THUMBNAILS</p></center></div></center><br>

        <img src="321321321321.png" width="200" height="150" id="mg1">

        <img src="ewqfh.png" width="200" height="150" id="mg2">
        <img src="2321321.png" width="200" height="150" id="mg3">

    </div>

＆＃13;

Answer 2

＆＃13;

for(int i=1;i<=n;i++)
 {
      cin >> value;

      while(value <0 or value >10)
       {
        cout << "please enter number in range of 0 to 10 only."
        cin >> value;
        if(value >=0 and value <=10)
        {
            break;
        }
      }
      sum+=value;
 }

＆＃13;

#section1{
position:relative;
}
#mg1,#mg2,#mg3{
position:absolute;
}
#mg1{
margin-left:3%;
}
#mg2{
top:200px;
  
}
#mg3{
left:200px;
  
}

#mg1:hover{
  margin-top:15%;
  transition:2s linear;
}

＆＃13;

Answer 3

将position:relative和 z-index:1 应用于#mg1。并使用top和left属性代替margin s，如果您的父元素太小，则使用vh和vw代替百分比。

段

＆＃13;

#section1 {
  height: 600px;
  width: 800px;
}
#mg1:hover {
  position: relative;
  top: 4vh;
  left: 3vw;
  z-index: 1;
}

＆＃13;

<div id="section1">
  <center>
    <div id="bgp">
      <center>
        <p>THUMBNAILS</p>
      </center>
    </div>
  </center>
  <br>

  <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" width="200" height="150" id="mg1">
  <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" width="200" height="150" id="mg2">
  <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" width="200" height="150" id="mg3">

</div>

＆＃13;

Answer 4

<!DOCTYPE html>
<html>
<head>
<style>
#mg1 {
  margin-left: 3%;

}
#mg1:hover {
  margin-top: 4%;    
}

img{
position: relative;
float : left;
}
}
</style>
</head>
<body>
<div id="section1">
  <center>
    <div id="bgp">
      <center>
        <p>THUMBNAILS</p>
      </center>
    </div>
  </center>
  <br>

  <img src="321321321321.png" width="200" height="150" id="mg1">
  <img src="ewqfh.png" width="200" height="150" id="mg2">
  <img src="2321321.png" width="200" height="150" id="mg3">

</div>

</body>
</html>

悬停效果适用于所有图像

4 个答案:

段