Javascript 在鼠标移出事件后显示以前的内容
我正在创建一个文档web应用程序模板。在我页面的右侧，我有一个所选类别的文章列表。通过单击事件（使用jQuery），将隐藏上一篇文章，并显示新文章 使用Javascript 在鼠标移出事件后显示以前的内容,javascript,jquery,mouseout,Javascript,Jquery,Mouseout,我正在创建一个文档web应用程序模板。在我页面的右侧，我有一个所选类别的文章列表。通过单击事件（使用jQuery），将隐藏上一篇文章，并显示新文章 使用mouseover事件，将显示内容的简短描述，同时隐藏原始内容 我正在尝试创建一个函数，该函数使用mouseout事件显示原始内容（在我的mouseover描述内容之前）。原始内容从来不是静态的 我想在主要内容文章上方创建一个，包含描述内容，然后将内容置于不透明度：%100。问题是我的页脚放在了页面的下方，这是我不想要的 从概念上讲，我不知道如何
mouseovermouseoutmouseover不透明度：%100<!DOCTYPE html>
<html>
<Head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--Recent Library-->
<!--JQuery UI CDN Info-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="indexscript.js"></script>
<title>Documentation Viewer</title>
</head>
<div id="container">
<body>
<header>
<div id="logo">
<h3 id="logo-title">
Documentation Viewer
</h3>
</div>
<div id="menu-top-right">
<ul class="menu-list-main">
<li class="menu-li-top" id="option1"><h4>
Option 1
</h4></li>
<li class="menu-li-top" id="option2"><h4>
Option 2
</h4></li>
<li class="menu-li-top" id="option3"><h4>
Option 3
</h4></li>
<li class="menu-li-top" id="option4"><h4>
About
</h4></li>
</ul>
</div>
</header>
<div id="body-content">
<div id="left-content">
<div id="article1" >
<h2>
Article 1
</h2>
<p id="summaryArt1">
<!--Enter Your Summary Here-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<div id="article2">
<h2>
Article 2
</h2>
<p id="summaryArt2">
<!--Enter Your Summary Here-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<div id="article3">
<h2>
Article 3
</h2>
<p id="summaryArt3">
<!--Enter Your Summary Here-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<div id="article4">
<h2>
Article 4
</h2>
<p id="summaryArt4">
<!--Enter Your Summary Here-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</div>
<div id="right-menu">
<ul id="menu-right">
<li class="li-menu-right" id="menuArt1" ><h4>
Article 1
</h4></a>
<p id="art1Hi"></p>
</li>
<li class="li-menu-right" id="menuArt2"><h4>
Article 2
</h4></li>
<li class="li-menu-right" id="menuArt3"><h4>
Article 3
</h4></a></li>
<li class="li-menu-right" id="menuArt4"><h4>
Article 4
</h4></a></li>
</ul>
</div>
</div>
<div id="footer">
<div id="logo-image">
<!--<img src="logo.jpg"></img>-->
<h4>Documentation Viewer</h4>
</div>
<div id="copyright">
<p id="copyright-text">copyright © <script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script> Documentation Viewer</p>
</div>
</div>
</body>
</div>
不透明度：0显示：无不透明度：0显示：无（*）
编辑：
在我页面的右侧，我有一个所选类别的文章列表
因为页面中有多篇文章，所以将它们都作为目标（如#article1
、#article2
等等）是多余的，而且“有问题”，最好给它们一个唯一的类名，即：.articles
，当页面准备就绪时，此代码将获取所有.articles
的内部html，并将每篇文章内容推送到一个数组origContArr
，用作原始内容的存储
在任何一个.articles
上的mouseenter
事件中，我们从数组newContArr
向悬停的.articles
注入新的html，这个数组的项可以显式地在javascript中输入，也可以从DOM元素中检索，并对它们应用display:none
，我们永远不会更改它们的显示值
我们将正确的原始内容和新内容注入到确切的.articles
元素的方法是，在提取原始内容的相同代码部分中，在javascript中动态地为每个元素赋予属性data num
var origContArr=[]，
//这可以从显示为“无”的隐藏元素中检索
//或者在js中硬编码
newContArr=[
"绿化分区的新内容",，
“ORANG div的新内容”，
“番茄汁的新成分”，
“天蓝部门的新内容”，
"海军部新内容",，
],
条款=$（“.articles”）；
//提取内部html，并将内容推送到origContArr
文章。每个（功能（索引）{
var divHTML=$（this.html（）；
origContArr.push（divHTML）；
//动态地将数据num属性设置为标识符
$（this.attr（'data-num'，index）；
});
关于（'mouseenter'，function（）的文章{
//注入新内容
$（this.html（newContArr[$（this.attr（'data-num'）））；
}).on（'mouseout'，function（）{
//用原始内容替换新内容
$（this.html（origContArr[$（this.attr（'data-num'）））；
});
.articles{
宽度：400px；线宽：30px；填充：5px；边距：3px 0；颜色：白色；文本对齐：0；
}
.green{背景色：绿色；}
.orange{背景色：橙色；}
.番茄{背景色：番茄；}
.skyblue{背景色：skyblue；}
.navy{背景色：navy；}
绿色分区的原始内容
橙色div的原始内容
番茄汁的原始成分
天蓝div的原始内容
海军部门的原始内容解决了这个问题
必须创建一个名为activeContent的全局变量
当单击菜单项时，将变量设置为等于相应的内容div
执行mouseout事件后，我将activeContent变量设置为.show（）
艾未未
没有代码，就很难得到任何帮助。请提供您的代码，显示您尝试过的内容。我想问的是，您最初单击以关闭第一组内容的位置是在内容本身的div中还是其他位置？内容是在静态div中生成的还是动态创建dom元素？只发送了代码。谢谢@JeandeToit内容位于静态分区中。摘要也位于静态分区中。刚刚意识到我的总结不应该与内容共享div。点击是在另一个地方关闭div。很好，很确定，因为.show（）
和.hide（）
分别将display
设置为block
和none
，每个页面中只有一篇文章吗？@Mi Creative我将有几个基于主题的页面。这些页面中的内容将是关于给定主题的文章。他们将在一页内发表几篇文章。谢谢你解释它是如何工作的。我对jQuery非常陌生。jQuery大量引用CSS吗？要定位和选择DOM元素，例如在您的示例中使用$（“#article1”）
时，希望找到一个具有属性id=“article1”
的DOM元素，因此您不能基于该选择器定位多个项目，而是使用$（'.articles'）
来定位它们。。就像我在示例演示中所做的那样，jQuery解决了在mouseenter
上注入新内容的问题，并在mouseeut
上带回原始内容，除了使用CSS选择器像CSS一样以DOM元素为目标之外，jQuery还具有“执行一组CSS属性的自定义动画”的功能，以及这些功能
$("document").ready(function() {
//What to do with the content on the initial load
hideAllArticles();
hideAllSummaries();
$("#article1").show();
function hideAllArticles(){
$("#article1").hide();
$("#article2").hide();
$("#article3").hide();
$("#article4").hide();
}
function hideAllSummaries(){
$("#summaryArt1").hide();
$("#summaryArt2").hide();
$("#summaryArt3").hide();
$("#summaryArt4").hide();
}
//Begin Click Functions For Right Menu Article Options
$( "#menuArt1" ).click(function() {
hideAllArticles();
$( "#article1" ).show( 'fold',1000 );
});
$( "#menuArt2" ).click(function() {
hideAllArticles();
$( "#article2" ).show( 'fold',1000 );
});
$( "#menuArt3" ).click(function() {
hideAllArticles();
$( "#article3" ).show( 'fold',1000 );
});
$( "#menuArt4" ).click(function() {
hideAllArticles();
$( "#article4" ).show( 'fold',1000 );
});
//Begin mouseover functions for right menu articles
$( "#menuArt1" ).mouseover(function() {
$( "#summaryArt1" ).show( 'fold',1000 );
});
$( "#menuArt2" ).mouseover(function() {
$( "#summaryArt2" ).show( 'fold',1000 );
});
$( "#menuArt3" ).mouseover(function() {
$( "#summaryArt3" ).show( 'fold',1000 );
});
$( "#menuArt4" ).mouseover(function() {
$( "#summaryArt4" ).show( 'fold',1000 );
});
//mouseout events for right menu
$( "#menuArt1" ).mouseout(function() {
$( "#summaryArt1" ).hide();
});
$( "#menuArt2" ).mouseout(function() {
$( "#summaryArt2" ).hide();
});
$( "#menuArt3" ).mouseout(function() {
$( "#summaryArt3" ).hide();
});
$( "#menuArt4" ).mouseout(function() {
$( "#summaryArt4" ).hide();
});
});
var activeContent = "#article1";
$( "#menuArt1" ).click(function() {
activeContent = "#article1";
hideAllArticles();
$( "#article1" ).show();
});
$( "#menuArt1" ).mouseover(function() {
$(activeContent).hide();
$( "#summaryArt1" ).show();
});
$( "#menuArt1" ).mouseout(function() {
$( "#summaryArt1" ).hide();
$(activeContent).show('fold');
});