我正在创建一个文档Web应用程序模板。在我页面的右侧，我有一个所选类别的文章列表。通过单击事件（使用jQuery），隐藏了上一篇文章，并显示了新文章。
使用mouseover事件时，会隐藏原始内容时显示内容的简短说明。
我正在尝试使用mouseover事件创建一个显示原始内容（我的mouseout“描述内容之前”）的功能。原始内容永远不会是静态的。
我想在主要内容文章上方创建一个<div>的描述内容，然后将内容<div>放在opacity:%100。问题是我的页脚放在页面上，这是我不想要的。
从概念上讲，我无法弄清楚如何用Javascript做到这一点。
<!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>
$("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();
});
});
答案 0 :(得分：2)
我想过在主要内容文章上面创建一个描述内容，然后将内容放在％100不透明度。 问题是我的页脚放在页面上，我不想要。
给一个元素opacity:0并不隐藏它，它只是将它淡出但它仍然占据它的空间，而是你可以使用display:none
使用opacity:0＆gt;＆gt; JS Fiddle 1 （*）
使用display:none＆gt;＆gt; JS Fiddle 2 （*）
修改
在我页面的右侧，我有一个所选类别的文章列表
因为您在页面中有多篇文章，所以这将是多余的，并且＆＃34;错误＆＃34;将它们全部定位为#article1，#article2等等，更好地为它们提供一个唯一的类名，即：.articles，并且当页面准备就绪时，此代码将采用内部所有.articles的html，并将每篇文章内容推送到用作原始内容商店的数组origContArr。
在这些mouseenter中的任何.articles事件上，我们将新的html注入数组.articles中的newContArr上方，可以显式输入此数组的项目在javascript中或者可以从应用了display:none的DOM元素中检索它们，我们永远不会改变它们的显示值。
我们将正确的原始内容以及新内容注入精确.articles元素的方式是在javascript中动态地为每个人提供一个属性data-num，该代码部分提取原始内容
var origContArr = [],
// this could be retrieved from hidden elements with display:none
// or hardcoded in the js
newContArr = [
'NEW content of the GREEN div',
'NEW content of the ORANG div',
'NEW content of the TOMATO div',
'NEW content of the SKYBLUE div',
'NEW content of the NAVY div',
],
articles = $('.articles');
//extract the inner html, and push the content to origContArr
articles.each(function(index){
var divHTML = $(this).html();
origContArr.push(divHTML);
// dynamically set a data-num attribute as an identifier
$(this).attr('data-num', index);
});
articles.on('mouseenter', function(){
// inject new content
$(this).html(newContArr[$(this).attr('data-num')]);
}).on('mouseout', function(){
// replace new content with the original content
$(this).html(origContArr[$(this).attr('data-num')]);
});.articles{
width:400px;line-height:30px;padding:5px;margin:3px 0;color:white;text-align:0;
}
.green{background-color:green;}
.orange{background-color:orange;}
.tomato{background-color:tomato;}
.skyblue{background-color:skyblue;}
.navy{background-color:navy;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="articles green">The ORIGINAL content of the GREEN div</div>
<div class="articles orange">The ORIGINAL content of the ORANGE div</div>
<div class="articles tomato">The ORIGINAL content of the TOMATO div</div>
<div class="articles skyblue">The ORIGINAL content of the SKYBLUE div</div>
<div class="articles navy">The ORIGINAL content of the NAVY div</div>
（*）。检查控制台
答案 1 :(得分：0)
想出来。
必须创建一个名为activeContent的全局变量。
单击菜单项时，将变量设置为等于相应的内容div。
执行mouseout事件后，我将activeContent变量设置为.show（）
EI。
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');
});