上格懸停改變鏈接的顏色時，格都是獨立的，嵌套

我有我的頁面左側錨定到12周的div在頁面右側12個鏈接。每當我向下滾動時，我都希望鏈接的顏色在div懸停時改變。上格懸停改變鏈接的顏色時，格都是獨立的，嵌套

問題：1。）的12個鏈接處於嵌套的div 2）右邊的div是在一個單獨的嵌套的div來的鏈接AFTER。

我嘗試使用此代碼：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 @字符集「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;}

來源

2012-09-30 user1709055

當你使用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，你需要處理錨點而不是divs。

讓我知道它是怎麼回事。 :)

編輯：並請刪除:的從您的節點ID和名稱，他們是不好的。

來源

2012-10-01 15:51:19

爲什麼在ID和名稱屬性中的冒號有什麼問題？他們工作得很好，不是嗎？：confused： – enhzflep

這沒有什麼錯，我的觀點是，** - 特殊字符在ID和名稱中應該被忽略 - **，它們有時會造成併發症。 @enhzflep –

這裏有一個例子給你@enhzflep，這一個沒有，因爲'作品：'在ID，[不工作（http://jsfiddle.net/AeSRM/），而這一次呢，因爲有在id中沒有'：'，[works]（http://jsfiddle.net/aLYAZ/）。 –

好吧，我會咬..

首先，你的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-01 15:58:54 enhzflep

上格懸停改變鏈接的顏色時，格都是獨立的，嵌套

回答

相關問題