我的 HTML CSS 程序中的可见性问题

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

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>

由于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>

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

<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>

第一个回答者大多是正确的，但我相信你的部分问题是你在那里看到了其他图像。要解决此问题，您需要为每个图像添加宽度：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(。

相关内容

最新更新

热门标签：