jquery - 在多个 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>

我想做的是在鼠标悬停时缩放第一个图像并更改背景的淡入淡出/不透明度，这样就不会影响 Logo 并使其停留在顶部。

我可以只用 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;
 }

当我将鼠标悬停时， Logo 会缩小并且 div2 不透明度不会降低。

Answer 1

两种方式都可以。

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

否则您可以使用 CSS 来实现此目的。