Javascript 鼠标悬停期间淡入非文本元素

我试图淡入我页面上的一个元素，它是一些用CSS格式化的文本。我可以使用

element.fadeIn（）

使纯文本元素淡入淡入。但这不适用于我文档的当前元素。

onMouseOver

和

onMouseOut

事件只是正确地显示和隐藏元素，不会褪色。我试图让它淡入（最终淡出）鼠标事件

的第一部分：

用于设置可见性的函数：

function setVisibility(id, visibility) {
  document.getElementById(id).style.display = visibility;
}

“sub2”元素：

---

是否有人能发现问题或建议我在鼠标悬停期间淡入“sub2”元素需要做什么？

由于您没有回答我关于显示与可见性的问题，我假设您希望它占用空间（示例）：

css:

jquery：

$(document).ready(function()
{
  $('.fadeIn').on('click', function()
  {
    var target = $(this).data('target');
    $(target).toggleClass('fade');
  });
});

html:

你点击点击我！
你好

---

fadeIn/fadeOut jQuery函数在处理哪种类型的元素时非常有限。是否在特定文本或任何元素中淡入？您希望不可见的元素占用空间，还是同时淡入并占用空间（

visibility:hidden

vs

display:none

）。方法是什么

setVisibility

？如果可以实现最终目标，我可以不使用jQuery淡入函数。如果元素占用空间也可以。实际上，该区域中有多个包含格式化文本的元素，它们将根据不同的鼠标悬停区域而褪色。抱歉，我添加了

setVisibility

函数。您可以使用jQuery动画：

function setVisibility(id, visibility) {
  document.getElementById(id).style.display = visibility;
}

<div class ="detail" id="sub2">
<p><b>Welcome my application!</b></p>
<p>Here is a bunch of text I want to fade in during a mouse over another element!
</p>
</div> 

.detail{ 
position: fixed; 
top: 0; 
left: 35%; 
width: 650px; 
height: 300px;
Line-height: 1.4em;
color : white; 
}

.fade-in
{
  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;    
}

.fade {
  opacity: 1;
}

$(document).ready(function()
{
  $('.fadeIn').on('click', function()
  {
    var target = $(this).data('target');
    $(target).toggleClass('fade');
  });
});

<a href="#" class="fadeIn" data-target="#theId">Click me!</a>
<div id="theId" class="fade-in">You clicked on Click me!</div>
<div>Hi!</div>