Question

我需要一个代码，当单击带有CSS / HTML的按钮时，文本会淡入淡出。有人可以帮忙吗？非常感谢。

这是我到目前为止所拥有的：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color:#000080;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #191970}

.button:active {
  background-color: #000080;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<body>

<button class="button"></button>

</body>
</html>

所以基本上要恢复，我希望在单击按钮时文本淡入。我不确定如何，在哪里或什么键入以使其工作。我只能想出按钮。

Answer 1

你可以用jQuery做到这一点

$("button").click(function(){
    $("p").fadeIn();
});

Answer 2

您可以尝试使用按钮上的focus并更新不透明度（或任何其他属性），如下所示：

＆＃13;

.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #000080;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  color: #000080;
}

.button:hover {
  background-color: #191970;
}

.button:focus {
  background-color: #000080;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

p {
  opacity: 0;
  transition: 0.5s;
}

.button:focus~p {
  opacity: 1;
}

＆＃13;

<button class="button"></button>
<p>
  lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</p>

＆＃13;

如何制作一个使文本淡入淡出的按钮？

2 个答案: