Question

我想制作一张可点击的图片。但是，当我将鼠标悬停在图像上时，它应该会变得模糊不清，并且会出现新的文字。我开始学习CSS了。它比HTML更有趣：D谢谢。

Answer 1

要访问您将使用的CSS

img：hover {}

但是如果您打算在图像上创建文本，则需要使用Javascript等脚本来实现。查看下面的链接了解css

jsfiddle.net/HAcE2 /

Answer 2

示例（HTML / CSS）：

＆＃13;

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  height: 150px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 150px;
}


span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
  opacity: 0;
}

ul.img-list li:hover span.text-content {
  opacity: 1;
}

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

＆＃13;

<ul class="img-list">
  <li>
    <a href="#">
      <img src="https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAADcEU/owwzfBaECbQ/s0-c-k-no-ns/photo.jpg" width="150" height="150" />
      <span class="text-content"><span>Google</span></span>
    </a>
  </li>
</ul>

＆＃13;

要添加动画，您可以使用：

  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;

在span.text-content。

中添加

当鼠标指针悬停在

2 个答案: