Question

此代码无法正常运行，我将不得不要求您远离明显缺少正确的网址和电子邮件地址。当我将鼠标悬停在其上方时，我正试图将照片与另一张照片一起切换。此外，我希望它是一张活跃的照片，所以当我点击它时，我会收到一个电子邮件弹出窗口。

 <!DOCTYPE html>
    <div>
       <br/>
    </div>
    <html>
    <head>
    <style type="text/css">
    .imgBox1
    {
      width: 333px;
      height: 416px;
      background-image: url(DSC_0267-Edit.jpg) no-repeat;
    }
    .imgBox1:hover
    {
      width: 333px;
      height: 416px;
      background-image: url(DSC_0267-Edit-Edit%202.jpg) no-repeat;
    }
    </style>
    </head>
    <body>
    <a href="mailto:x@x.com">
    <div class="imgBox1">
    </div>
    </a>
    </body>
    </html>

Answer 1

将css更改为使用background-image中的背景。结帐背景CSS规则documentation on MDN以获取更多信息。

.imgBox1 {
  width: 333px;
  height: 416px;
  background: url(https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png) no-repeat;
}
.imgBox1:hover {
  width: 333px;
  height: 416px;
  background-image: url(https://s.yimg.com/rz/l/yahoo_en-US_f_p_142x37_2x.png);
}

<a href="mailto:x@x.com">
  <div class="imgBox1"></div>
</a>

我的css代码不能正常工作，它不会显示图像

1 个答案: