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

标签 javascript jquery mouseout

我正在创建文档 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 &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();
});
});

最佳答案

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不隐藏它，它只是淡出它但它仍然占据它的空间，相反你可以使用 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

因为您在页面中有不止一篇文章，所以像 #article1 一样将它们全部定位是多余的和“错误的” , #article2等等，最好给他们一个独特的类名，即:.articles ，当页面准备就绪时，此代码将获取所有 .articles 的内部 html并将每篇文章内容插入数组origContArr用作原始内容的商店。

关于 mouseenter这些事件中的任何一个 .articles我们将新的 html 注入(inject)到悬停的 .articles 中来自数组 newContArr ，这个数组的项目可以在 javascript 中显式输入，或者可以使用 display:none 从 DOM 元素中检索。应用于它们，我们永远不会改变它们的显示值。

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

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>

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

(*)。查看控制台

关于javascript - 在 mouseout 事件后显示之前的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34563439/

上一篇：javascript - nvd3 多条图表状态在图例切换时错误地更新？

下一篇：javascript - d3.js 力有向图球体

相关文章：

javascript - 在项目中使用 Kendo PanelBar 的多个实例

jquery - 在 http 页面上使用 https 的 Ajax

javascript - 在特定屏幕宽度下隐藏 JS 函数

PHP/Ajax/jQuery - 将 jquery 值传递给 php 脚本

javascript - AngularJS 嵌套 ng-repeat 内的计数

Javascript html解码

javascript - 使用 jQuery 引用直接选择器对象？

css - 悬停前后不同的CSS样式

javascript - 如果使用 mouseout，则指令模板中的 AngularJS 事件绑定(bind)不起作用，但可以使用 mouseover

jquery - 悬停时的边框效果

©2024 IT工具网  联系我们