0

将鼠标悬停在列表上时，我正在使用 JavaScript 来实现预览框。我会告诉你我的代码，然后是一个关于它是如何工作的实时网站，然后我会说这个问题。

HTML

<div id="content">

<div id="theDiv"><h1>Custom </h1></div>

<div id="theDiv1"><h1>Custom One</h1> </div>

<div id="theDiv2"><h1>Custom Two</h1></div>

<div id="theDiv3"><h1>Custom Three</h1></div>

<div id="theDiv4"><h1>Custom Four</h1></div>

<div id="theDiv5"><h1>Custom Five</h1></div>

<div id="theDiv6"><h1>Custom Six</h1></div>

<div id="theDiv7"><h1>Custom Seven</h1></div>


<ul id="nav">
  <li><a href="#"><b>Austria ></b></a> <br/>
    <ul>
      <li><a href="#" class="theLink">Factsheet </a></li><br/>
      <li><a href="#" class="theLink1">Stylesheet </a></li><br/>
      <li><a href="#" class="theLink2">References </a></li><br/>
    </ul>
  </li>
  <li><a href="#"><b>Switzerland ></b></a> <br/>
    <ul>
      <li><a href="#" class="theLinka">Factsheet </a></li><br/>
      <li><a href="#" class="theLinka1">Stylesheet </a></li><br/>
      <li><a href="#" class="theLinka2">References </a></li><br/>
    </ul>
  </li>
  <li><a href="#"><b>Explanation Page ></b></a> <br/>
    <ul>
      <li><a href="#" class="theLinkb">Stylesheet </a></li><br/>
      <li><a href="#" class="theLinkb1">References </a></li><br/>
    </ul>
  </li>
</ul>



        </div>

CSS

ul {
    padding-left:10px;
    list-style: none;
    width:150px;
}


ul li {
    position: relative;
    left:10px;
    width:148px;
}

li ul {
    position: relative;
    display:none;
}
/* Styles for Menu Items */
ul li a {
    display:block;
    text-decoration: none;
    line-height:2em;
    height:2em; 
    padding:0 5px;
    color:#666;
}
a:hover {color:#999;}
li ul li {width:139px; }
li.on ul { display:block; }
li.off ul{display:none; }
.linkhover:hover {text-decoration:underline; }
.linkxp:hover {text-decoration:underline; }

#theDiv, #theDiv1, #theDiv2, #theDiv3, #theDiv4, #theDiv5, #theDiv6, #theDiv7, #theDiv8 {
    padding:10px;
    float:right;
    margin:0px 50px 0 0;
    width:300px;
    height:500px;
    border:1px solid #000;
    display:none;
}

JavaScript

$(window).load(function(){
 $(".theLink").hover(
        function () {
            $("#theDiv").fadeIn();
        },
        function () {
            $("#theDiv").fadeOut();
        }
    );
});

$(window).load(function(){
 $(".theLink1").hover(
        function () {
            $("#theDiv1").fadeIn();
        },
        function () {
            $("#theDiv1").fadeOut();
        }
    );
});

$(window).load(function(){
 $(".theLink2").hover(
        function () {
            $("#theDiv2").fadeIn();
        },
        function () {
            $("#theDiv2").fadeOut();
        }
    );
});

$(window).load(function(){
 $(".theLinka").hover(
        function () {
            $("#theDiv3").fadeIn();
        },
        function () {
            $("#theDiv3").fadeOut();
        }
    );
});

$(window).load(function(){
 $(".theLinka1").hover(
        function () {
            $("#theDiv4").fadeIn();
        },
        function () {
            $("#theDiv4").fadeOut();
        }
    );
});

$(window).load(function(){
 $(".theLinka2").hover(
        function () {
            $("#theDiv5").fadeIn();
        },
        function () {
            $("#theDiv5").fadeOut();
        }
    );
});

$(window).load(function(){
 $(".theLinkb").hover(
        function () {
            $("#theDiv6").fadeIn();
        },
        function () {
            $("#theDiv6").fadeOut();
        }
    );
});

$(window).load(function(){
 $(".theLinkb1").hover(
        function () {
            $("#theDiv7").fadeIn();
        },
        function () {
            $("#theDiv7").fadeOut();
        }
    );
});

这是一个实时视图的链接； http://tubebackgrounds.co.uk/uni/demo/explanation.html#

如您所见，如果在显示列表样式时将鼠标悬停在列表样式上的速度过快，则会显示其他样式。我想知道是否可以使用 if 语句，所以只有一个

$(window).load(function(){
 $(".theLink").hover(
        function () {
            $("#theDiv").fadeIn();
        },
        function () {
            $("#theDiv").fadeOut();
        }
    );
});

可以一次性启用吗？或者也许是一种使淡入和淡出更快的方法。

4

2 回答 2

1

问题的一部分只是你的CSS。您的每个 div（#theDiv、#theDiv1、#theDiv2 等）都彼此相邻浮动。所以当你隐藏一个时，下一个会在它的位置弹出。如果您将他们的显示属性设置为 display:block 您将设置我所说的内容。你真正想要的是将这些 div 一个一个堆叠在另一个之上，就像一副纸牌一样，然后淡入淡出。要实现这一点，请尝试添加此 css：

#content { 
   position:relative;
} 
#theDiv, #theDiv1, #theDiv2, #theDiv3, #theDiv4,#theDiv5, #theDiv6, #theDiv7, #theDiv8 {
    border: 1px solid #000000;
    display: none;
    height: 500px;
    margin: 0 50px 0 0;
    padding: 10px;
    position: absolute;
    right: 0;
    width: 300px;
}

现在你的javascript应该可以正常工作了。您可以通过使用@beerwin 建议和使用回调使 javascript 更好一些。这样 div 淡入只会在前一个淡出后才会淡入

于 2012-11-08T20:49:56.543 回答
0

使用回调函数：

$(window).load(function(){
  $(".theLink").hover(
    function () {
        $("#theDiv").fadeOut(function(){
            $("#theDiv1").fadeIn();
        });
    });
});
于 2012-11-08T19:35:09.787 回答