在多个div中定位一个div

Question

第一个div

第二个div

所以它就像这样

    <div class="div1">
     1st image goes here
        <div class="div2">
          the background-color goes here
          and the logo with the href
          </div>
    </div>

我想要做的是鼠标悬停以缩放第一张图片并更改背景的淡入淡出/不透明度，这样就不会影响徽标，让它保持在最顶层。

我可以用css实现这个吗？还是我必须实现jQuery？

这就是我所拥有的

    .div1{
      position: relative;
      transform:scale(1);
       transition:all 1s;
       object-fit: cover;
       display:block;
       img{
             object-fit: cover;
       }
       :hover img {
         transform:scale(1.05);
       }
      }
    }

  .div2{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background-color:red;
  opacity:1;
  transition: opacity .35s,transform .35s;
  :hover{
   opacity:.5;
  }
 }

 .div2 img{
  width: 150px !important;
  display : block;
  margin : auto;
  position: relative;
  height: auto;
  z-index: 40;
 }

当我悬停鼠标时，徽标会缩小，div2不透明度不会降低。

Answer 1

你可以两种方式做到。

如果您正在使用jQuery，请使用onmouseover和mouseout。您不希望仅限于这些功能。使用jQuery有很多方法可以实现这一点。

否则你可以使用CSS来实现这一目标。