1

頭を悩ませている問題が少しあります。これを行う方法が奇妙で、問題が発生する可能性が高いことはわかっていますが、CSSだけを使用して試してみたかったのです。私は今それをかなり近づけましたが、問題があり、私が諦める前に誰かがアイデアを持っているかもしれないことを望んでいました。

基本的に、ホバーすると画像を変更するナビゲーションバーがあります。これとの違いは、ホバー時に2つの画像を変更したかったことです。そこで、2つの画像を1つの大きな画像に入れて、ホバーリンクの外側に画像をオーバーフローさせることで、これを実行できると判断しました。

これで、ある程度は機能しますが、リンクを左から右にオーバーオーバーすると、ホバーが正常に表示されますが、右から左に実行すると機能しません。

テストへのリンクは次のとおりですhttp://www.pclwebdesign.co.uk/fruit

スパンがその中にあるので明らかに機能しないことを考えた後、私はzインデックスを作成してリンクを先に進めようとしました。

CSS

body{
    background:#FFF;
    }

#wrap{
    margin:0 auto;
    width:894px;
    height:900px;
    background:url(../images/background.jpg) no-repeat;
    }

#header{
    position:relative;
    margin:0 auto;
    width:625px;
    height:92px;
    }

#navbar{
    position:relative;
    display:block;
    margin-left:114px;
    width:626px;
    height:170px;
    background:url(../images/navbar2.jpg)
}

ul.cssmenu {    
list-style: none; padding-left: 24px; margin-top:-12px;     
}
.displace {    
position: absolute;    left: -5000px;     
}
ul.cssmenu li {    
float: left;    
}
ul.cssmenu li a {    
display: block; height: 170px;    
}

/**    Normal Links*/
ul.cssmenu li.about a {  
margin-right:10px; width:86px; height:59px;}
ul.cssmenu li.gallery a { width:120px; height:59px;}
ul.cssmenu li.home a {  width:150px; height:59px;}
ul.cssmenu li.contact a {  width:120px; height:59px;}
ul.cssmenu li.video a {  width:97px; height:59px;}

/**    Hidden LED Navbar images*/
ul.cssmenu li.about a .led {
    display: none; width:626px; height:170px; margin-left:-24px;}
ul.cssmenu li.gallery a .led {
    display: none; width:626px; height:170px; margin-left:-120px;}
ul.cssmenu li.home a .led {
    display: none; width:626px; height:170px; margin-left:-240px;}
ul.cssmenu li.contact a .led {
    display: none; width:626px; height:170px; margin-left:-390px;}
ul.cssmenu li.video a .led {
    display: none; width:626px; height:170px; margin-left:-510px; }


/**    Hover Links*/
ul.cssmenu li.about a:hover .led {
    display: block; width:626px; height:170px; margin-left:-24px; background:url(../images/navbar2.jpg); background-position: 0px -170px;    
    }
ul.cssmenu li.gallery a:hover .led {
    display: block; width:626px; height:170px; margin-left:-120px; background:url(../images/navbar2.jpg); background-position: 0px -340px;    
    }
ul.cssmenu li.home a:hover .led {
    display: block; width:626px; height:170px; margin-left:-240px; background:url(../images/navbar2.jpg); background-position: 0px -510px;    
    }
ul.cssmenu li.contact a:hover .led {
    display: block; width:626px; height:170px; margin-left:-390px; background:url(../images/navbar2.jpg); background-position: 0px -680px;    
    }
ul.cssmenu li.video a:hover .led {
    display: block; width:626px; height:170px; margin-left:-510px; background:url(../images/navbar2.jpg); background-position: 0px -850px;    
    }

/** Navigation bar finish */

HTML

<div id="wrap">
    <div id="header">
    </div>

    <div id="navbar">
      <ul class="cssmenu">
        <li class="about"><a href="about.htm" title="About"><span class="led"></span></a></li>

        <li class="gallery"><a href="gallery.htm" title="Gallery"><span class="led"></span></a></li>

        <li class="home"><a href="home.htm" title="Home"><span class="led"></span></a></li>

        <li class="contact"><a href="contact.htm" title="Contact"><span class="led"></span></a></li>

        <li class="video"><a href="video.htm" title="Video"><span class="led"></span></a></li>

      </ul>
    </div>


</div>
4

1 に答える 1

1

このための代替方法を調べてみましたか? これは、非常に単純な jQuery を使用する絶好の機会になると思います。jsfiddle http://jsfiddle.net/Ee37A/4/でコードの簡単なドラフトを作成しました。明らかに、div のスタイルを設定し、テキストを画像に置き換える必要がありますが、これは探しているものを実現するためのよりクリーンな方法だと思います。

基本的に、クラス ".about" (ナビゲーション ボタン) の div にマウスを合わせると、jQuery はクラス 'aboutPicture' (LED の写真) の div を見つけて表示します。マウスを離すと、「aboutPicture」div が非表示になります。私は 2 つの異なる li をプログラムしただけですが、これを基礎として使用できます。

jQuery の詳細については、http: //jQuery.comからソースをダウンロードしてください。jsfiddle.net に表示される関数を含む外部 .js ファイルを作成する必要があります。

于 2011-10-05T18:51:51.143 に答える