Question

我希望有几张图片，当用户将鼠标悬停在每张图片上时，图像会消失，并在下方显示文字。现在，图像在悬停时消失，但文字始终保持在图像上方。

HTML

<table align="center" style="width: 90vw;margin-right: 10vw;margin-left: 10vw;">

    <tr>
        <th>
            <div class="inhabitantOne">
                <p>Test Text.  Test Text.  Test Text.  Test Text.</p>
                <img src="judas.jpg">
            </div>
        </th>
        <th>
            <div class="inhabitantTwo">
                <img src="cain.jpg">
            </div>
        </th>
        <th>
            <div class="inhabitantThree">
                <img src="Ganelon.jpg">
            </div>
        </th>
    </tr>

CSS

.inhabitantOne {
  background-color: #8592b2;
  border-radius: 2vw;
  height: 20vw;
  width: 20vw;
  text-align: center;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: #505151;
}

.inhabitantOne img {
   height: 100%;
   width: 100%;
}


.inhabitantOne:hover img {
  opacity: 0.0;
}

Answer 1

将此添加到您的css

p{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
p:hover{
  text-indent: 0%;
  white-space: nowrap;
  overflow: visible;
}

或者如果你想特定于每个div类，请使用：

.inhabitantOne p{

  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.inhabitantOne p:hover{
  text-indent: 0%;
  white-space: nowrap;
  overflow: visible;
}

Answer 2

我为所有div添加了一个公共类

    <tr>
        <th>
            <div class="inhabitant inhabitantOne">
                <p>Test Text.  Test Text.  Test Text.  Test Text.</p>
                <img src="judas.jpg">
            </div>
        </th>
        <th>
            <div class="inhabitant inhabitantTwo">
                <img src="cain.jpg">
            </div>
        </th>
        <th>
            <div class="inhabitant inhabitantThree">
                <img src="Ganelon.jpg">
            </div>
        </th>
    </tr>

只需将这些添加到您的css

即可

.inhabitant p {
  opacity: 0;
  visibility: hidden;
}

.inhabitant:hover p{
  opacity: 1;
  visibility: visible;
}

.inhabitant:hover img{
  opacity: 0;
  visibility: hidden;
}

如果您想要平滑过渡，可以添加.inhabitant p class

transition: all .2s

将图片放在HTML

2 个答案: