在 mouseout 事件后显示之前的内容

Question

我正在创建文档 Web 应用程序模板。在我页面的右侧，我有一个所选类别中的文章列表。通过单击事件（使用jQuery）隐藏上一篇文章并显示新文章。

在 mouseover 事件中，将显示内容的简短描述，同时隐藏原始内容。

我正在尝试创建一个函数来显示带有 mouseout 事件的原始内容（在我的 mouseover "description content" 之前）。原创内容从不一成不变

我想在主要内容文章上面创建一个<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 &copy; <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();
});
});

Answer 1

I thought of creating a above the main content articles with the description content and then have the content put at %100 opacity. The problem with that is my footer gets placed way down the page, which I don't want.

给一个元素一个 opacity:0 不会隐藏它，它只是淡出它但它仍然占据它的 space，相反你可以使用 display:none

使用 opacity:0 >> JS Fiddle 1 ^(*)

使用 display:none >> JS Fiddle 2 ^(*)

编辑：

On the right hand side of my page I have a list of articles in the selected category

因为您在页面中有不止一篇文章，所以它会是多余的，"buggy" 将它们全部作为目标，例如 #article1、#article2 等等，最好给它们一个唯一的 class 名称，即：.articles，当页面准备就绪时，此代码将获取所有 .articles 的内部 html 并将每篇文章内容推送到数组 origContArr 用作原始内容的商店。

在任何这些 .articles 的 mouseenter 事件中，我们将新的 html 从数组 newContArr 中注入到悬停在 .articles 上的项目中该数组可以在 javascript 中显式输入，也可以从 DOM 元素中检索并应用 display:none，我们永远不会更改它们的显示值。

我们将正确的原始内容和新内容注入到确切的 .articles 元素的方式是在同一代码中的 javascript 中动态地给每个元素一个属性 data-num提取原始内容的部分。

JS Fiddle 3

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>

-------------------------------------------- ------------------------------

^(*)。检查控制台

Answer 2

想通了。

必须创建一个名为 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');
});

在 mouseout 事件后显示之前的内容

Show previous content after a mouseout event

javascript

jquery

mouseout

-------------------------------------------- ------------------------------