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

How to hide and show elements on mouseover of containing element using Javascript?

本文关键字：元素 包含 悬停 鼠标 Javascript 何使用 隐藏 显示      更新时间：2023-09-26

我有一个包含div，其中包含'h1'标题和'p'描述。我想要隐藏的"描述段落"，而"标题"是可见的页面加载，当鼠标进入"容器"，标题渐隐，描述渐隐可见，然后交换可见性回到原来的可见性在mouseout。单靠CSS我无法实现我想要的。

我对javascript的工作原理了解不多，但我可以在某种程度上理解它，任何帮助都会非常感激。如果需要的话，我也可以提供更多的信息。

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

可以使用CSS过渡来实现渐变效果。

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

.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>

使用。hide()和。show()函数。首先在css中设置description为display: none，同时使用mouseout()和mouseover()函数

<div class="container">
    <h1 class="name">Title</h1>
    <p id="desc">description</p>
</div>
$('.container').mouseout(function(){
     $('.name').show();
     $('#desc').hide();
});
$('.container').mouseover(function(){
    $('.name').hide();
    $('#desc').show();
});
#desc{
    display:none;
}

JSfiddle:http://jsfiddle.net/n470z649/

相关文章：