Question

我正在尝试将鼠标悬停在另一个图像上来更改图像，但似乎无法使其响应。我试过将高度设为自动，但无法解决。谢谢！

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.container {
  position: relative;
  width: auto;
}
    .responsive {
        background-repeat: no-repeat;
        width: 100% ;
        height: auto;
        display: inline-block ;
        background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg');
    }
    .responsive:hover {
        background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos1.jpg');
    }
</style>
</head>
<body>
<a href="http://www.corelangs.com" class="responsive" title="Corelangs link"></a>
</body>
</html>

Answer 1

您需要显式设置大小

<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style type="text/css">
          .container {
            position: relative;
            width: auto;
          }
          .responsive {
              width:  100px;
              height: 100px;
              display: inline-block ;
              background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg');
              background-repeat: no-repeat;
          }
          .responsive:hover {
              background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos1.jpg');
          }
      </style>
  </head>
  <body>
      <a href="http://www.corelangs.com" class="responsive" title="Corelangs link"></a>
  </body>
</html>

但是有一种方法可以使这项工作不知道大小。不过，它将采用img src中的图片大小（基于此post）

<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style type="text/css">
          .container {
            position: relative;
            width: auto;
          }
          .responsive {
              background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg');
              background-repeat: no-repeat;
              display: inline-block;
          }
          .responsive:hover {
              background-image: url('http://laurasbdar.com/wp-content/uploads/2019/04/articulos1.jpg');
          }
      </style>
  </head>
  <body>
      <a href="http://www.corelangs.com" title="Corelangs link"><div class="responsive"><img style="visibility: hidden;" src="http://laurasbdar.com/wp-content/uploads/2019/04/articulos2.jpg" ></div></a>
  </body>
</html>

如何使图像在图像悬停时响应？

1 个答案: