Fatal编程技术网
  • html/
  • Html 悬停效果适用于所有图像

Html 悬停效果适用于所有图像

html css

Html 悬停效果适用于所有图像,html,css,Html,Css,我这里有这个代码： #mg1{ 左缘：3%； } #mg1：悬停{ 利润率最高：4%； } 缩略图 #mg1{ 左缘：3%； 位置：相对位置； } #mg1：悬停{ 利润率最高：4%； } img{ 浮动：左； } 缩略图 #第1节{ 位置：相对位置； } #mg1、mg2、mg3{ 位置：绝对位置； } #mg1{ 左缘：3%； } #氧化镁{ 顶部：200px； } #mg3{ 左：200px； } #mg1：悬停{ 利润率最高：15%； 过渡：2s线性； } 缩略图 将位置：

我这里有这个代码：

#mg1{
左缘：3%；
}
#mg1：悬停{
利润率最高：4%；
}

缩略图




#mg1{
左缘：3%；
位置：相对位置；
}
#mg1：悬停{
利润率最高：4%；
}
img{
浮动：左；
}

缩略图



#第1节{
位置：相对位置；
}
#mg1、mg2、mg3{
位置：绝对位置；
}
#mg1{
左缘：3%；
}
#氧化镁{
顶部：200px；
}
#mg3{
左：200px；
}
#mg1：悬停{
利润率最高：15%；
过渡：2s线性；
}

缩略图
将
位置：相对
和
z-index:1
应用于
#mg1
。使用
top
和
left
属性代替
margin
s，如果父元素太小，则使用
vh
和
vw
代替百分比

一小条


#第1节{
高度：600px；
宽度：800px；
}
#mg1：悬停{
位置：相对位置；
顶部：4vh；
左：3vw；
z指数：1；
}



缩略图





#mg1{
左缘：3%；
}
#mg1：悬停{
利润率最高：4%；
}
img{
位置：相对位置；
浮动：左；
}
}
缩略图




更改
#mg1
的边距时，也会影响相邻图像。这些图片都共享相同的三维空间。我已经添加了您期望的答案请解释您的答案，仅代码的答案可能对其他人没有多大用处。

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