Question

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

我对javascript的工作方式知之甚少，但在查看它时我可以稍微了解一下，任何帮助都会非常感激。如果需要，我也可以提供更多信息。

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

Answer 1

您可以使用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>

Answer 2

使用.hide（）和.show（）函数。最初在css中将描述描述为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/

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

2 个答案: