Question

我的页面左侧有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 Document * /

#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;}

Answer 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和名称中删除:，这些都不合适。

Answer 2

好的，我会咬人..

首先，你的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>

当div分离并嵌套时，在div悬停时更改链接颜色

2 个答案: