javascript - 如何使用 Javascript 在包含元素的鼠标悬停时隐藏和显示元素？

Question

我有一个包含的 div，其中有一个“h1”标题和一个“p”描述。我希望隐藏“描述段落”，而“标题”在页面加载时可见，当鼠标进入“容器”时，标题淡化为隐藏，说明淡化为可见，然后将可见性交换回其原始可见性在鼠标移开时。我无法单独使用 CSS 实现我想要的。

我对 javascript 的工作原理知之甚少，但在查看它时我可以稍微理解它，任何帮助将不胜感激。如果需要，我也可以提供更多信息。

<div class="container">
    <h1 class="name">Title</h1>
    <p>description</p>
</div>

Answer 1

您可以使用 CSS 过渡来淡化效果。

首先将所有段落的不透明度设置为零。将鼠标悬停在标题上时，逐渐增加段落的不透明度，逐渐降低标题的不透明度。

.container p {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}
.container h1 {
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}
.container:hover p {
  opacity: 1;
}
.container:hover h1 {
  opacity: 0;
}

<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>

您还可以使用 jQuery 的 hover 和 animate 方法

$('.container').hover(function() {
  $(this).find('p').animate({
    opacity: 1
  }).end().find('h1').animate({
    opacity: 0
  });
}, function() {
  $(this).find('p').animate({
    opacity: 0
  }).end().find('h1').animate({
    opacity: 1
  });
});

.container p {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>
<div class="container">
  <h1 class="name">Title</h1>
  <p>description</p>
</div>