我的 html css 程序中的可见性问题

Question

当鼠标悬停在任何正方形上时，图像必须可见，但我遇到了问题。当鼠标悬停在正方形上时，图像变得可见，但在背景中我们看到了每个图像的一部分。我该如何解决这个问题？

h1 {
  text-align: center;
}

.floating-box {
  float: left;
  border: 1px solid black;
  width: 300px;
  height: 300px;
  margin: 0px;
}

div.float {
  padding: 50px 50px 50px 50px;
  margin: 100px 200px 100px 240px;
  border: 1px solid white;
  width: 1000px;
  height: 1000px;
}

img:hover {
  width: 300px;
  height: 300px;
  visibility: visible;
}

<h1>Move Your Mouse Over Squares to See Images</h1>
<div class="float">
  <div class="floating-box"><img src="1.jpg"></div>
  <div class="floating-box"><img src="2.jpg"></div>
  <div class="floating-box"><img src="3.jpg"></div>
  <div class="floating-box"><img src="4.jpg"></div>
  <div class="floating-box"><img src="5.jpg"></div>
  <div class="floating-box"><img src="6.jpg"></div>
  <div class="floating-box"><img src="7.jpg"></div>
  <div class="floating-box"><img src="8.jpg"></div>
  <div class="floating-box"><img src="9.jpg"></div>
</div>

Answer 1

因为 img 不可见所以你不能悬停它来显示它，你需要将鼠标悬停在框 div 上才能显示 img

    img{
         visibility: hidden;
    }

        h1{
            text-align: center;
        }
        .floating-box{
            float: left;
            border: 1px solid black;
            width: 300px;
            height: 300px;
            margin: 0px;
        }
        div.float{
            padding:50px 50px 50px 50px;
            margin: 100px 200px 100px 240px;
            border: 1px solid white;
            width: 1000px;
            height: 1000px;
        }
        img{
             visibility: hidden;
        }
        div.floating-box:hover  img{
            width: 300px;
            height: 300px;
           visibility:visible;                      
        }

   <h1>Move Your Mouse Over Squares to See Images</h1>
    <div class="float">
      <div class="floating-box"><img src="//www.gravatar.com/avatar/b77e895475fbc6c52e27b2000ff39604/?default=&amp;s=64" height="32" width="32"></div>
      <div class="floating-box"><img src="2.jpg"></div>
      <div class="floating-box"><img src="3.jpg"></div>
      <div class="floating-box"><img src="4.jpg"></div>
      <div class="floating-box"><img src="5.jpg"></div>
      <div class="floating-box"><img src="6.jpg"></div>
      <div class="floating-box"><img src="7.jpg"></div>
      <div class="floating-box"><img src="8.jpg"></div>
      <div class="floating-box"><img src="9.jpg"></div>
 </div>

Answer 2

使用不透明度并指定宽度和高度

<head>

    <style>
        h1{
            text-align: center;
        }
        .floating-box{
            float: left;
            border: 1px solid black;
            width: 300px;
            height: 300px;
            margin: 0px;
        }
        div.float{
            padding:50px 50px 50px 50px;
            margin: 100px 200px 100px 240px;
            border: 1px solid white;
            width: 1000px;
            height: 1000px;
        }
         img{
          opacity: 0;
            width: 300px;
            height: 300px;
        }

img:hover{
            opacity:1;                    
        }
    </style>
</head>
<body>
    <h1>Move Your Mouse Over Squares to See Images</h1>
    <div class="float">
   <div class="floating-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Greenland_dog_upernavik_2007-06-02_sample.jpg"></div>
      <div class="floating-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Greenland_dog_upernavik_2007-06-02_sample.jpg"></div>
      <div class="floating-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Greenland_dog_upernavik_2007-06-02_sample.jpg"></div>
      <div class="floating-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Greenland_dog_upernavik_2007-06-02_sample.jpg"></div>
      <div class="floating-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Greenland_dog_upernavik_2007-06-02_sample.jpg"></div>
      <div class="floating-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Greenland_dog_upernavik_2007-06-02_sample.jpg"></div>
      <div class="floating-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Greenland_dog_upernavik_2007-06-02_sample.jpgg"></div>
      <div class="floating-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Greenland_dog_upernavik_2007-06-02_sample.jpg"></div>
      <div class="floating-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Greenland_dog_upernavik_2007-06-02_sample.jpg"></div>
 </div>


</body>

<head>
    <style>
        h1{
            text-align: center;
        }
        .floating-box{
            float: left;
            border: 1px solid black;
            width: 300px;
            height: 300px;
            margin: 0px;
        }
        div.float{
            padding:50px 50px 50px 50px;
            margin: 100px 200px 100px 240px;
            border: 1px solid white;
            width: 1000px;
            height: 1000px;
        }
         img{
          opacity: 0;
            width: 300px;
            height: 300px;
        }

img:hover{
            opacity:1;                    
        }
    </style>
</head>
<body>
    <h1>Move Your Mouse Over Squares to See Images</h1>
    <div class="float">
   <div class="floating-box"><img src="1.jpg"></div>
      <div class="floating-box"><img src="2.jpg"></div>
      <div class="floating-box"><img src="3.jpg"></div>
      <div class="floating-box"><img src="4.jpg"></div>
      <div class="floating-box"><img src="5.jpg"></div>
      <div class="floating-box"><img src="6.jpg"></div>
      <div class="floating-box"><img src="7.jpg"></div>
      <div class="floating-box"><img src="8.jpg"></div>
      <div class="floating-box"><img src="9.jpg"></div>
 </div>
</body>

Answer 3

第一个回答者大部分是正确的，但我相信你的部分问题是你看到了里面的其他图像。要解决这个问题，您需要为每个图像添加 width: 100% 以使其留在容器内。

所以您唯一的更改如下：

h1 {
  text-align: center;
}
.floating-box {
  float: left;
  border: 1px solid black;
  width: 300px;
  height: 300px;
  margin: 0px;
}
/* Just add the width control here to the image to avoid leaks */
.floating-box img {
  width:100%;
  visibility: hidden;
}
div.float {
  padding: 50px 50px 50px 50px;
  margin: 100px 200px 100px 240px;
  border: 1px solid white;
  width: 1000px;
  height: 1000px;
}
/* Make the hover on the floating-box instead of on img */
.floating-box:hover img {
  width:100%;
  visibility: visible;
}

<h1>Move Your Mouse Over Squares to See Images</h1>
<div class="float">
  <div class="floating-box"><img src="http://www.catster.com/wp-content/uploads/2017/12/A-gray-kitten-meowing.jpg"></div>
  <div class="floating-box"><img src="2.jpg"></div>
  <div class="floating-box"><img src="3.jpg"></div>
  <div class="floating-box"><img src="4.jpg"></div>
  <div class="floating-box"><img src="5.jpg"></div>
  <div class="floating-box"><img src="6.jpg"></div>
  <div class="floating-box"><img src="7.jpg"></div>
  <div class="floating-box"><img src="8.jpg"></div>
  <div class="floating-box"><img src="9.jpg"></div>
</div>

然后悬停本身相同，但悬停应用于框，而不是图像 (.floating-box:hover img)。

我的 html css 程序中的可见性问题

visibility issue in my html css program

html

javascript

css

visibility

image