Question

我知道这是一个简单的问题，可能是一个简单的解决方案，但我似乎无法弄清楚为什么这个悬停功能无效。

这是我的CSS：

.section {
    width: calc(100% - 40px);
    padding: 20px;
    padding-bottom: 0px;
    background-color: #EDEEEF;
}

.ltbtm-border {
     border-bottom: 1px solid #CCC;
}

.section-inner {
    margin: 0 auto;
    width: calc(100% - 200px);
    max-width: 1000px;
    padding: 20px;
    padding-top: 0px;
    padding-bottom: 60px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.zoomin img {
    height: 256px;
    width: 256px;
    display: block;
    z-index: 999;
    transition: transform 2s ease;
}


     .zoomin img:hover {
         transform: scale(1.2);
    }

这是我的HTML：

<div class="section">
    <div class="section-inner ltbtm-border">
        <div class="title">
            <span class="titletxt">INTRODUCTION</span>
            <br />
            <br />
            <iframe src="https://open.spotify.com/follow/1/?uri=spotify:artist:7EeW8FlZSaPSxZlPe9dABb&size=detail&theme=dark" width="300" height="56" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowtransparency="true"></iframe>
        </div>



        /* This is where I'm having a problem with */
        <div class="zoomin">             
            <img oncontextmenu="return false" ondragstart="return false"  
                 src="Images/PerfectCookie.png" />
        </div>
   </div>

照片在那里，当我悬停时它只是不会变换。有什么我做错了吗？当我将鼠标悬停在它上面时，我只想让照片放大。

Answer 1

我在Plunker尝试了你的例子，它工作正常。你还有其他代码/ CSS吗？

<head>
  <style>
    .zoomin img {
      height: 256px;
      width: 256px;
      display: block;
      z-index: 999;
      -webkit-transition-property: all;
      -webkit-transition-duration: 0.3s;
      -webkit-transition-timing-function: ease;
    }

    .zoomin img:hover {
      transform: scale(1.5);
    }
  </style>
</head>

<body>
  <div class="zoomin">
    <img oncontextmenu="return false" ondragstart="return false" src="Images/PerfectCookie.png" />
  </div>
</body>

工作Plunker

CSS转换缩放属性不适用于悬停

1 个答案: