0

リストにカーソルを合わせると、JavaScript を使用してプレビュー ボックスが表示されます。私のコードと、それがどのように機能するかについてのライブ Web サイトを示してから、問題について説明します。

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文が使えるのか気になるので1つだけ

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

一度に有効にできますか？または、フェードインとフェードアウトをより速くする方法かもしれません。

4

2 に答える 2

1

問題の一部はあなたのcssだけです。各 div (#theDiv、#theDiv1、#theDiv2 など...) を隣り合わせに配置します。そのため、1 つを非表示にすると、次のものがその場所にポップアップ表示されます。表示プロパティを 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 フェードインは、前の 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 に答える