Question

我一直在尝试使用HTML和CSS创建一个图像映射，其中用户滚动图像的某个部分并弹出文本标题。我想我几乎就在那里，但我希望文字标题淡入淡出而不是只是出现和消失。任何人都可以指出我正确的方向吗？这是我到目前为止的代码：

＆＃13;

#map {
  margin: 0;
  padding: 0;
  width: 400px;
  height: 250px;
  background: #000;
  font-family: 'Lato', Calibri, Arial, sans-serif;
  font-size: 10pt;
  font-weight: 700;
  line-height: 18px;
}
#map h1 {
  margin: 0px;
  padding-bottom: 5px;
  color: #fff;
  font-size: 12pt;
  font-weight: 700;
}
#map li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#map li a {
  position: absolute;
  display: block;
  background: url(images/blank.gif);
  text-decoration: none;
  color: #ed4e6e;


}
#map li a span {
  display: none;

}
#map li a:hover span {
  position: relative;
  display: block;
  width: 200px;
  left: 20px;
  top: 20px;
  border: 0px solid #000;
  border-radius: 5px;
  background: #2c3f52;
  padding: 20px;

}
#map a.caption1 {
  top: 80px;  left: 60px;
  width: 10px;
  height: 10px;
  background: #ff0035;
}
#map a.caption2 {
  top: 80px;
  left: 190px;
  width: 10px;
  height: 10px;
  background: #ff0035;

}
#map a.caption3 {
  top: 180px;
  left: 60px;
  width: 10px;
  height: 10px;
  background: #ff0035;
}
#map a.caption4 {
  top: 170px;
  left: 250px;
  width: 10px;
  height: 10px;
  background: #ff0035;
}
#map a.caption5 {
  top: 90px;
  left: 365px;
  width: 10px;
  height: 10px;
  background: #ff0035;
}

＆＃13;

<ul id="map">
  <li><a class="caption1" href="#" title=""><span>
    <h1>Caption 1</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span></a></li>
  <li><a class="caption2" href="#" title=""><span>
    <h1>Caption 2</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
  <li><a class="caption3" href="#" title=""><span>
    <h1>Caption 3</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
  <li><a class="caption4" href="#" title=""><span>
    <h1>Caption 4</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
  <li><a class="caption5" href="#" title=""><span>
    <h1>Caption 5</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li>
</ul>

＆＃13;

Answer 1

您可以将当前的css更改为此

#map li a span {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

#map li a:hover span {
  position: relative;
  width: 200px;
  display: block;
  z-index: 10;
  visibility: visible;
  opacity: 1;
  left: 20px;
  top: 20px;
  border: 0px solid #000;
  border-radius: 5px;
  background: #2c3f52;
  padding: 20px;
}

小提琴：http://codepen.io/hunzaboy/pen/mOWOqa

如何让我的CSS文字字幕淡入淡出？

1 个答案: