1

我正在尝试使用内部阴影和内部图像缩放 div。这是代码：

 <!DOCTYPE html>
    <html>
       <head>
          <title> Home Page </title>  
          <style>

             div#b{
                box-shadow:0 0 10px 2px  #fff inset;
                border-radius:10px;
                width:230px;
                height:150px;
                transition: all 1s ease;
             }

             div#b:hover {
                position:relative;
                z-index:3;
                transform:scale(1.2,1.2) rotate(0.02deg);
             }

             div#b img{
                width:230px; 
                height:150px;
                border-radius:10px;
                position: relative;
                z-index:-2;
             }

          </style>
       </head>
       <body>

          <div id="b">
             <a href="#">
                <img src="img.jpg" alt="img" title="myimg">
             </a>
          </div>

       </body>
    </html>

问题是当鼠标悬停在 div 上时，图像出现在 div 上，隐藏了内部阴影。

我已经尝试过 z-index:3 div:hover 但没有结果。你能帮帮我吗？

提前致谢

4

1 回答 1

0

添加box-shadow: 0 0 10px 2px #fff inset;和display: inline-block;到div#b a

JSFiddle -演示

div#b a {
    display: inline-block;
    box-shadow:0 0 10px 2px #fff inset;
}
div#b img {
    width:230px;
    height:150px;
    border-radius:10px;
    position: relative;
    z-index:-2;
    vertical-align: middle;
}
于 2014-10-09T13:14:49.730 回答