1

ページの左側に 12 個のリンクがあり、ページの右側にある 12 個の div に固定されています。下にスクロールするたびに、div ホバーでリンクの色を変更したいと考えています。

問題: 1.) 12 個のリンクがネストされた div にある 2.) 右側の div は、リンクの後に来る別のネストされた div にあります。

このコードを使用してみました: http://jsfiddle.net/gU4sw/7/しかし、ネストされた div で動作していなかったため、元に戻しました。

これを解決する方法はありますか？これが私がこれまでに持っているものです。最初にこの問題を解決するのを待っているので、まだすべての div を挿入していません。

HTML:

<body>
<body style="margin:0px;">
<div id="wrapper">
    <div id="navbar">
        <div id="navbartext">
            <div class="center">
                <div id="morning"><a href="index.html">MORNING</a></div><br/>
                <div id="one"><a href="#7:30">7:30</a></div><br/>
                <div id="two"><a href="#8:00">8:00</a></div><br/>
                <div id="three"><a href="#10:00">10:00</a></div><br/>
                <div id="noon"><a href="#NOON">NOON</a></div><br/>
                <div id="five"><a href="#2:00">2:00</a></div><br/>
                <div id="six"><a href="#5:00">5:00</a></div><br/>
                <div id="seven"><a href="#5:15">5:15</a></div><br/>
                <div id="night"><a href="#NIGHT">NIGHT</a></div><br/>
                <div id="nine"><a href="#9:00">9:00</a></div><br/>
                <div id="ten"><a href="#12:00">12:00</a></div><br/>
                <div id="eleven"><a href="#3:00">3:00</a></div><br/>
          </div>
        </div>
     </div>
</div>

<div id="content">
     <div id="subcontent">
        <br/><br/><br/><br/><br/><br/><img src="images/myday.png" width="613" height="287" /> <br/><br/><br/><br/>
        <h5>&#8595;SCROLL DOWN&#8595;</h5><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

                <a name="7:30"><div class="img"><img src="images/cal.gif" width="640" height="" /></div></a>
                <a name="9:00"><div class="img"><img src="img.jpeg" width="640" height="" /></div></a>
     </div>
</div>

</body>


</body>
</html>

CSS: $0@charset "UTF-8"; /* CSS ドキュメント */

#wrapper {margin: 0px;}

/*Navigation Bar*/
#navbar {background:#FF9999; 
    padding:15px; 
    position:fixed; 
    left: 90px;
    width:115px; 
    height:100%;}
#navbartext { top: 50%;
    width: 115px;
    height: 100%;}

a:link {color: #FFF;
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    text-align: center;
    font-weight: 300;
    text-decoration: none;}
a:visited {color: #FFf;}
a:active {color: #FFf58A;}
a:hover {color: #FFF58A;}
img:hover + a  {color: #FFF58A;}

.center {display: inline-block;
    vertical-align: middle;
    background: #FF9999;
    width: 115px;
    color: #FFF;
    height: 100%;
    text-align: center;
    margin: 0px;}

#morning {width:115px;
    position: absolute;
    top: 3%}    
#one {width:115px; 
    top: 11%; 
    position: absolute;}
#two {width:115px; 
    top: 19.4%; 
    position: absolute;}
#three {width:115px; 
    top: 27%;
    position: absolute;}
#noon {width:115px;
    top: 35%;
    position: absolute;}
#five {width:115px;
    top: 43%;
    position: absolute;}
#six {width:115px;
    top: 51%;
    position: absolute;}
#seven {width:115px;
    top: 59%;
    position: absolute;}
#night {width:115px;
    top: 67%;
    position: absolute;}
#nine {width:115px;
    top: 75%;
    position: absolute;}
#ten {width:115px;
    top: 83%;
    position: absolute;}
#eleven {width:115px;
    top: 91%;
    position:absolute;}




/*Content*/
#content {height: 10000px; 
    padding-top: 45px;
    margin-left: 200px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    color: #cda8cb;}    
#subcontent {width: 950px;
    margin: 0 auto;}
.img {top: 50%;
        left: 50%;
    display: table-cell;
    margin: auto;
    vertical-align: middle;
    width: 950px;
    padding-top: 175px;
    padding-bottom: 200px;
    img: hover + a color: #FFF58A;}



/*text*/
<h4> {color: #FFF;
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    text-align: center;
    font-weight: 300;
    line-height: 260%;
    vertical-align: middle;}
<h5> {font-color: #cda8cb;
    font-size: 24px;
    text-align: center;
    font-weight: 100;
    line-height: 260%;
    vertical-align: middle;}    


/* 
#content {height:10000px; 
    padding-top:45px;
    margin-left: 350px;}

#subcontent {width: 950px;
    height: 950px;
    margin: 0 auto;
    }
#navbartext {}
#navbartext {}
#myday {padding-top: 110px;}
4

2 に答える 2

1

さて、私はかみます。

まず、あなたのcssには閉じられていないコメントがあります-それはそれのいくつかの効果を無効にします。次に、h4とh5のルールが間違っています（中括弧を削除してください）

最後に、小さなjavascriptがその仕事をするのに役立ちます。クロムでテスト済み。楽しみ！

<html>
<head>
<style>
#wrapper {margin: 0px;}

/*Navigation Bar*/
#navbar {background:#FF9999; 
    padding:15px; 
    position:fixed; 
    left: 90px;
    width:115px; 
    height:100%;}
#navbartext { top: 50%;
    width: 115px;
    height: 100%;}

a:link {color: #FFF;
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    text-align: center;
    font-weight: 300;
    text-decoration: none;}
a:visited {color: #FFf;}
a:active {color: #FFf58A;}


.center {display: inline-block;
    vertical-align: middle;
    background: #FF9999;
    width: 115px;
    color: #FFF;
    height: 100%;
    text-align: center;
    margin: 0px;}

#morning {width:115px;
    position: absolute;
    top: 3%}    
#one {width:115px; 
    top: 11%; 
    position: absolute;}
#two {width:115px; 
    top: 19.4%; 
    position: absolute;}
#three {width:115px; 
    top: 27%;
    position: absolute;}
#noon {width:115px;
    top: 35%;
    position: absolute;}
#five {width:115px;
    top: 43%;
    position: absolute;}
#six {width:115px;
    top: 51%;
    position: absolute;}
#seven {width:115px;
    top: 59%;
    position: absolute;}
#night {width:115px;
    top: 67%;
    position: absolute;}
#nine {width:115px;
    top: 75%;
    position: absolute;}
#ten {width:115px;
    top: 83%;
    position: absolute;}
#eleven {width:115px;
    top: 91%;
    position:absolute;}




/*Content*/
#content {height: 10000px; 
    padding-top: 45px;
    margin-left: 200px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    color: #cda8cb;}    
#subcontent {width: 950px;
    margin: 0 auto;}
.img {top: 50%;
        left: 50%;
    display: table-cell;
    margin: auto;
    vertical-align: middle;
    width: 950px;
    padding-top: 175px;
    padding-bottom: 200px;
    img: hover + a color: #FFF58A;}



/*text*/
h4 {color: #FFF;
    font-family: 'Quicksand', sans-serif;
    font-size: 24px;
    text-align: center;
    font-weight: 300;
    line-height: 260%;
    vertical-align: middle;}
h5 {font-color: #cda8cb;
    font-size: 24px;
    text-align: center;
    font-weight: 100;
    line-height: 260%;
    vertical-align: middle;}    


#content {height:10000px; 
    padding-top:45px;
    margin-left: 350px;}

#subcontent {width: 950px;
    height: 950px;
    margin: 0 auto;
    }

#myday {padding-top: 110px;}

a:hover, .remoteControlled a
{
    color: #FFF58A;
}

</style>
<script>
function myMouseOver(element)
{
    var srchStr = element.getAttribute('name');
    var aList = document.getElementById('navbartext').getElementsByTagName('a');
    var i, n = aList.length;
    for (i=0; i<n; i++)
    {
        curStr = aList[i].innerHTML
        //curStr = curStr.substr(1);
        if (curStr == srchStr)
            aList[i].parentNode.className = 'remoteControlled';
    }
}

function myMouseOut(element)
{
    var navList = document.getElementById('navbartext').getElementsByTagName('a');
    var i, n = navList.length;
    for (i=0; i<n; i++)
    {
        navList[i].parentNode.className = '';
    }
}
</script>
</head>
<body>
<body style="margin:0px;">
<div id="wrapper">
    <div id="navbar">
        <div id="navbartext">
            <div class="center">
                <div id="morning"><a href="index.html">MORNING</a></div><br/>
                <div id="one"><a href="#7:30">7:30</a></div><br/>
                <div id="two"><a href="#8:00">8:00</a></div><br/>
                <div id="three"><a href="#10:00">10:00</a></div><br/>
                <div id="noon"><a href="#NOON">NOON</a></div><br/>
                <div id="five"><a href="#2:00">2:00</a></div><br/>
                <div id="six"><a href="#5:00">5:00</a></div><br/>
                <div id="seven"><a href="#5:15">5:15</a></div><br/>
                <div id="night"><a href="#NIGHT">NIGHT</a></div><br/>
                <div id="nine"><a href="#9:00">9:00</a></div><br/>
                <div id="ten"><a href="#12:00">12:00</a></div><br/>
                <div id="eleven"><a href="#3:00">3:00</a></div><br/>
          </div>
        </div>
     </div>
</div>

<div id="content">
     <div id="subcontent">
        <br/><br/><br/><br/><br/><br/><img src="images/myday.png" width="613" height="287" /> <br/><br/><br/><br/>
        <h5>&#8595;SCROLL DOWN&#8595;</h5><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

                <a name="7:30" onmouseout='myMouseOut();' onmouseover='myMouseOver(this);'><div class="img"><img src="images/cal.gif" width="640" height="" /></div></a>
                <a name="9:00" onmouseout='myMouseOut();' onmouseover='myMouseOver(this);'><div class="img"><img src="img.jpeg" width="640" height="" /></div></a>
     </div>
</div>

</body>


</body>
</html>
于 2012-10-01T15:58:54.363 に答える
1

divsリストの代わりに使用すると、非常に複雑になります。

それでも、そのようにしたい場合は、ここに解決策があります。jQueryこれらすべてのホバーイベントを処理するコードをページに追加します。jQueryにはhover()、ホバーがあるたびにメソッドを呼び出す関数があります。

この関数について詳しくは、http：//api.jquery.com/hover/をご覧ください。

上記を通過した後、これを追加します：

$(document).ready(function(e) {
    $("#IDofThediv").hover(
        function() {        //This will be executed when the mouse enters the div
            $("#IDofTheAnchor").css("color", "#000");
        },
        function() {        //This will be executed when the mouse exits the div
            $("#IDofTheAnchor").css("color", "#FFF");
        }
    );
});

これで、コードはナビゲーションバーのdiv内でアンカーを使用し、cssファイルでアンカーのcssを具体的に変更したため、divではなくアンカーで作業する必要があります。

どうなるか教えてください。:)

編集：そして:、ノードIDと名前からを削除してください。それらは良くありません。

于 2012-10-01T15:51:19.020 に答える