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

当你使用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 和名称中删除:'s，它们不好。

于 2012-10-01T15:51:19.020 回答
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 回答