Question

这是html标记

<div class="imgBox">

  <img //src="https://cdn.images.dailystar.co.uk/dynamic/122/photos/693000/900x738/1074693.jpg" alt="IMG">

  <div class="rollOver">
    lol
  </div>

</div>

当我将鼠标悬停在.imgBox上时，为什么背景颜色不会从-300px移动到-200px？

css代码：

   body{
      margin: 0;
      padding: 0;
    }

    .imgBox{
     width: 500px;
     height: 500px;
     position: relative;
    }

    img{
     width: 100%;
     height: 100%;

    }
    .rollOver{
     position: absolute;
     left: 0px;
     top: 0px;
     background-color: rgba(3, 3, 3, 0.897);
     height: 100%;
     width: 100%;  
     transform: translateX(-300px);  
     transition:all .4s ease; 

    }

当我将鼠标悬停在.imgBox上时为什么不起作用，那么.rollover会发生什么呢？

    .rollOver .imgBox:hover{
     transform: translateX(-200px);
     }

https://jsfiddle.net/61fqnyne/

Answer 1

我承认我完全不确定你的目的是什么，但你的选择器错误。

你需要

.imgBox:hover .rollOver { your styles here}

我想象的是这样的事情，

＆＃13;

body {
  margin: 0;
  padding: 0;
}

.imgBox {
  width: 200px;
  height: 200px;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
}

.rollOver {
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: rgba(3, 3, 3, 0.897);
  height: 100%;
  width: 100%;
  transform: translateX(-100%);
  transition: all .4s ease;
  overflow: hidden;
}

.imgBox:hover .rollOver {
  transform: translateX(0);
}

＆＃13;

<div class="imgBox">
  <img src="https://cdn.images.dailystar.co.uk/dynamic/122/photos/693000/900x738/1074693.jpg" alt="IMG">

  <div class="rollOver">
    lol
  </div>
</div>

＆＃13;

在img上滑动背景颜色

1 个答案: