Question

最近我想将转换和转换应用到div并且发生了非常有线的事情。

我的div结构是这样的：

＆＃13;

    .img img {
      width: 234px;
      height: 140px;
      position: relative;
      display: inline-block;
      overflow: hidden;
      margin-bottom: 20px;
      transition: transform .5s; 
    }
     .img img:hover {
        transform: scale(1.2); 
    }
    .playWrapper{
      position: absolute;
      height: 32px;
      margin-top: 25%;
      width: 100%;
      display: block;
    }
    
    .playWrapper .playVideo{
      background: url('http://lorempixel.com/20/20/') 0 0 no-repeat;
      margin: 0 auto;
      display: inline-block;
      width: 32px;
      height: 32px;
    }

＆＃13;

    <div class="img nlist">
    	<div class="playWrapper">
    	    <div class="playVideo"></div>
        </div>	
        <img src="http://lorempixel.com/200/200/">
    </div>

＆＃13;

有两件事我无法弄明白该怎么做。一个是playVideo div不对齐中心。另一个是当我将鼠标悬停在img上时，img会缩小，但是playVideo png会消失，当我将鼠标从img中移出时，比例将返回到1并再次出现playVedio png。

有没有人知道如何将鼠标悬停在img上时可以看到png，以及当父母必须是绝对位置时如何对齐div的中心？

Answer 1

一个是playVideo div未对齐中心。

要让所有内容始终居中，只需向父级添加z-index规则即可。

另一个是当我将鼠标悬停在img上时，img会缩小，但是 playVideo png会消失，当我把鼠标移出img时，比例返回到1并再次出现playVedio png。

可以通过向{。{}}添加playWrapper来简单地修复此问题，以使其成为容器中的顶层。

CSS更改

.img { text-align: center; }

.playWrapper { z-index: 1; }

工作示例

.img {
  text-align: center;
  position: relative;
}
.img img {
  width: 234px;
  height: 140px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  transition: transform .5s;
}
.img img:hover {
  transform: scale(1.2);
}
.playWrapper {
  position: absolute;
  height: 32px;
  bottom: 0;
  width: 100%;
  display: block;
  z-index: 1;
}
.playWrapper .playVideo {
  background: url('http://lorempixel.com/20/20/') 0 0 no-repeat;
  margin: 0 auto;
  display: inline-block;
  width: 32px;
  height: 32px;
}

<div class="img nlist">
  <div class="playWrapper">
    <div class="playVideo"></div>
  </div>
  <img src="http://lorempixel.com/200/200/">
</div>

应用变换比例函数

1 个答案: