Question

我正在为我的作品创建一个“Meet the Team”样式页面，并且当你将鼠标悬停在它上面时，我试图使每个人的图像消失，并且文本出现将解释他们的行为。目前，我正在使用的是hover:属性，它似乎没有做任何事情。这是我下面的代码;

.info {
  display: inline-block;
  width: 32%;
  height: 300px;
  margin-top: 5px;
  text-align: center;
  background: #CFCFCF;
}
.info h5 {
  display: block;
  background: white;
  margin: 0;
}
.info p {
  display: block;
  padding-top: 10px;
  margin: 0;
}
.hoverinfo {
  position: static;
  color: #000000;
  cursor: pointer;
}
.hoverinfo p {
  display: none;
  color: #000000;
}
.hoverinfo:hover p {
  background-color: #C4C4C4;
  width: 32%;
  height: 300px;
  border: 1px solid black;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="meet.css">
  <h1>Meet the Team</h1>
</head>

<body>

  <div id="joe" class="info">
    <h5>Joe Bloggs</h5>

    <div id="default" class="image">
      <div id="imagehover" class="hoverinfo">
        <img src="DefaultProfile.png" border="0" />
        <p>Test paragraph</p>

      </div>

    </div>

  </div>

  <div id="john" class="info">
    <h5>John Smith</h5>

    <div id="default" class="image">
      <div id="imagehover" class="hoverinfo">
        <img src="DefaultProfile.png" border="0" />
        <p>Test paragraph</p>

      </div>

    </div>

  </div>

  <div id="jane" class="info">
    <h5>Jane Doe</h5>

    <div id="default" class="image">
      <div id="imagehover" class="hoverinfo">
        <img src="DefaultProfile.png" border="0" />
        <p>Test paragraph</p>

      </div>

    </div>

  </div>

  <div id="joe" class="info">
    <h5>Joe Bloggs</h5>

    <div id="default" class="image">
      <div id="imagehover" class="hoverinfo">
        <img src="DefaultProfile.png" border="0" />
        <p>Test paragraph</p>

      </div>

    </div>

  </div>

  <div id="john" class="info">
    <h5>John Smith</h5>

    <div id="default" class="image">
      <div id="imagehover" class="hoverinfo">
        <img src="DefaultProfile.png" border="0" />
        <p>Test paragraph</p>

      </div>

    </div>

  </div>

  <div id="jane" class="info">
    <h5>Jane Doe</h5>

    <div id="default" class="image">
      <div id="imagehover" class="hoverinfo">
        <img src="DefaultProfile.png" border="0" />
        <p>Test paragraph</p>

      </div>

    </div>

我在这方面有点初学者，所以我知道我可能没有使用正确的东西。使用animate属性将图像淡出并淡入文本会更有意义。在挖掘之后，有些人提到使用jQuery，我迄今没有任何经验。无论如何，如果有人可以帮助我正在尝试做什么，我将不胜感激！

由于

Answer 1

您只需要使用display：none和set class / ID隐藏类或ID：hover to display：block。

要淡入或淡出图像，可以使用不透明度而不是display：none;并使用像ease.in/out

这样的css转换

更新了代码，使文字与图片成比例居中

.container {
  display: inline-block;
  height: 320px;
  width: 200px;
  background: white;
  text-align: center;
}
.hoverinfo {
  width: 200px;
  height: 300px;
  background: #CFCFCF;
  position: relative;
}

.hovertext {
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hoverinfo:hover .hovertext {
  opacity: 1;
  transition: all .5s ease-in;
}
.hoverinfo:hover .hoverimage {
  opacity: 0;
  transition: all .5s ease-out;
}

<div class="container">
  <h5 class="headline">Joe Bloggs</h5>
  <div class="hoverinfo">
    <img class="hoverimage" src="http://lorempixel.com/g/200/300/" />
    <div class="hovertext">Test paragraph</div>
  </div>
</div>
<div class="container">
  <h5 class="headline">Joe Bloggings</h5>
  <div class="hoverinfo">
    <img class="hoverimage" src="http://lorempixel.com/g/200/300/" />
    <div class="hovertext">Test paragraph</div>
  </div>
</div>
<div class="container">
  <h5 class="headline">Joe Bloggers</h5>
  <div class="hoverinfo">
    <img class="hoverimage" src="http://lorempixel.com/g/200/300/" />
    <div class="hovertext">Test paragraph</div>
  </div>
</div>
<div class="container">
  <h5 class="headline">Jane Bloggers</h5>
  <div class="hoverinfo">
    <img class="hoverimage" src="http://lorempixel.com/g/200/300/" />
    <div class="hovertext">Test paragraph</div>
  </div>
</div>

在悬停时尝试使文本显示在图像上（可能不使用正确的属性）

1 个答案: