如何使鏈接更改顏色上懸停

無法弄清楚這一點..我想這樣做，當你將鼠標懸停在付款選項和就業機會下的文本，它會改變顏色爲：＃b27bae，同時也使小箭頭有翻轉圖像。謝謝！如何使鏈接更改顏色上懸停

網站鏈接：www.thetotempole.ca

HTML：

<!DOCTYPE html> 
<head> 
    <title>Untitled-1</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!-- Save for Web Styles (Untitled-1.psd) --> 
    <style type="text/css"> 
     <!-- body { 
      font-family:verdana, georgia, sans-serif; 
     } 
     img { 
      border: none; 
     } 
     #Table_01 { 
      position:relative; 
      left:0px; 
      top:0px; 
      width:960px; 
      height:800px; 
      margin-left: auto; 
      margin-right: auto; 
     } 
     #index-01 { 
      position:absolute; 
      left:0px; 
      top:0px; 
      width:960px; 
      height:305px; 
     } 
     #index-02 { 
      position:absolute; 
      left:0px; 
      top:305px; 
      width:240px; 
      height:50px; 
     } 
     #index-03 { 
      position:absolute; 
      left:240px; 
      top:305px; 
      width:240px; 
      height:50px; 
     } 
     #index-04 { 
      position:absolute; 
      left:480px; 
      top:305px; 
      width:240px; 
      height:50px; 
     } 
     #index-05 { 
      position:absolute; 
      left:720px; 
      top:305px; 
      width:240px; 
      height:50px; 
     } 
     #index-06 { 
      position:absolute; 
      left:0px; 
      top:355px; 
      width:960px; 
      height:15px; 
      background-image:url('images/index_06.jpg'); 
     } 
     #index-07 { 
      position:absolute; 
      left:0px; 
      top:370px; 
      width:105px; 
      height:144px; 
      background-image:url('images/index_07.jpg'); 
     } 
     #index-08 { 
      position: absolute; 
      left: 102px; 
      top: 370px; 
      width: 771px; 
      height: 56px; 
     } 
     #index-09 { 
      position:absolute; 
      left:836px; 
      top:370px; 
      width:124px; 
      height:110px; 
      background-image:url('images/index_09.jpg'); 
     } 
     #index-10 { 
      position:absolute; 
      left:105px; 
      top:426px; 
      width:731px; 
      height:54px; 
      background-image:url('images/index_10.jpg'); 
     } 
     #index-11 { 
      position:absolute; 
      left:105px; 
      top:480px; 
      width:303px; 
      height:34px; 
      background-image:url('images/index_11.jpg'); 
     } 
     #index-12 { 
      position:absolute; 
      left:408px; 
      top:480px; 
      width:471px; 
      height:273px; 
     } 
     #index-13 { 
      position:absolute; 
      left:879px; 
      top:480px; 
      width:81px; 
      height:320px; 
      background-image:url('images/index_13.jpg'); 
     } 
     #index-14 { 
      position:absolute; 
      left:0px; 
      top:514px; 
      width:48px; 
      height:286px; 
      background-image:url('images/index_14.jpg'); 
     } 
     #index-15 { 
      position:absolute; 
      left:48px; 
      top:514px; 
      width:250px; 
      height:50px; 
     } 
     #index-16 { 
      position:absolute; 
      left:298px; 
      top:514px; 
      width:110px; 
      height:286px; 
      background-image:url('images/index_16.jpg'); 
     } 
     #index-17 { 
      position:absolute; 
      left:48px; 
      top:564px; 
      width:250px; 
      height:58px; 
      background-image:url('images/index_17.jpg'); 
     } 
     #index-18 { 
      position:absolute; 
      left:48px; 
      top:622px; 
      width:250px; 
      height:75px; 
     } 
     #index-19 { 
      position:absolute; 
      left:48px; 
      top:697px; 
      width:250px; 
      height:103px; 
      background-image:url('images/index_19.jpg'); 
     } 
     #index-20 { 
      position:absolute; 
      left:408px; 
      top:753px; 
      width:471px; 
      height:47px; 
      background-image:url('images/index_20.jpg'); 
     } 
     #first { 
      position: absolute; 
      z-index: 1; 
      top: 483px; 
      left: 58px; 
     } 
     #second { 
      position: absolute; 
      z-index: 1; 
      top: 590px; 
      left: 58px; 
     } 
     --> 
    </style> 
    <!-- End Save for Web Styles --> 
    <script type="text/javascript"> 
     function MM_swapImgRestore() { //v3.0 
      var i, x, a = document.MM_sr; 
      for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc; 
     } 

     function MM_preloadImages() { //v3.0 
      var d = document; 
      if (d.images) { 
       if (!d.MM_p) d.MM_p = new Array(); 
       var i, j = d.MM_p.length, 
        a = MM_preloadImages.arguments; 
       for (i = 0; i < a.length; i++) 
       if (a[i].indexOf("#") != 0) { 
        d.MM_p[j] = new Image; 
        d.MM_p[j++].src = a[i]; 
       } 
      } 
     } 

     function MM_findObj(n, d) { //v4.01 
      var p, i, x; 
      if (!d) d = document; 
      if ((p = n.indexOf("?")) > 0 && parent.frames.length) { 
       d = parent.frames[n.substring(p + 1)].document; 
       n = n.substring(0, p); 
      } 
      if (!(x = d[n]) && d.all) x = d.all[n]; 
      for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n]; 
      for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document); 
      if (!x && d.getElementById) x = d.getElementById(n); 
      return x; 
     } 

     function MM_swapImage() { //v3.0 
      var i, j = 0, 
       x, a = MM_swapImage.arguments; 
      document.MM_sr = new Array; 
      for (i = 0; i < (a.length - 2); i += 3) 
      if ((x = MM_findObj(a[i])) != null) { 
       document.MM_sr[j++] = x; 
       if (!x.oSrc) x.oSrc = x.src; 
       x.src = a[i + 2]; 
      } 
     } 
    </script> 
</head> 
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;" onLoad="MM_preloadImages('images/navr.jpg','images/navr2.jpg','images/navroll.jpg','images/arrows1.jpg')"> 
    <!-- Save for Web Slices (Untitled-1.psd) --> 
    <div id="Table_01"> 
     <div id="index-01"> <a href="index.html"><img src="images/index_01.jpg" width="960" height="305" alt="Enhanced Health Services' Banner"></a> 

     </div> 
     <div id="index-02"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image20','','images/navr.jpg',1)"><img src="images/nav.jpg" width="240" height="50" id="Image20"></a> 

     </div> 
     <div id="index-03"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','images/navr2.jpg',1)"><img src="images/nav2.jpg" width="240" height="50" id="Image12"></a> 
     </div> 
     <div id="index-04"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image22','','images/navr3.jpg',1)"><img src="images/nav3.jpg" width="240" height="50" id="Image22"></a> 
     </div> 
     <div id="index-05"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image223','','images/navroll.jpg',1)"><img src="images/navbaar.jpg" width="240" height="50" id="Image223"></a> 
     </div> 
     <div id="index-06"></div> 
     <div id="index-07"></div> 
     <div id="index-08" position: relative; style=" color:#0033ff;font-size: 21px; z-index:1;">We are <strong>committed</strong> to first-rate competent and ethical primary health care delivery.</div> 
     <div id="index-09"></div> 
     <div id="index-10"></div> 
     <div id="first" style="font-size:14px; color:white;">PAYMENT OPTIONS</div> 
     <div id="index-11"></div> 
     <div id="index-12"></div> 
     <div id="index-13"></div> 
     <div id="index-14"></div> 
     <div id="index-15"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6dsa','','images/arrows1.jpg',1)"><div id="apo" style="position:absolute;font-size:13px;text-decoration:none; color:#833083;">Account payments online.</div><img style="position: absolute; left: 232px; top: 1px;" src="images/arrows.jpg" alt="" id="Image6dsa"></a> 
     </div> 
     <div id="index-16"></div> 
     <div id="second" style="font-size:14px; color:white;">EMPLOYMENT OPPORTUNITIES</div> 
     <div id="index-17"></div> 
     <div id="index-18"><a href="contactus.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7dsaa','','images/arrows1.jpg',1)"><div id="apo2" style="position: absolute; font-size:13px; text-decoration:none; width: 236px; height: 56px; left: 0px; top: 0px;color:#833083;">Enhanced Health Services is now offering employment opportunities for nurses.<img style="position: absolute; left: 232px; top: 2px;" src="images/arrows.jpg" alt="" id="Image7dsaa"></div> 
     </a> 

     </div> 
     <div id="index-19"></div> 
     <div id="index-20"></div> 
    </div> 
    <!-- End Save for Web Slices --> 
</body> 

</html>

來源

2013-12-10 Kelsey

我試圖懸停在div /菜單項的id是在index-15內部。對於所有的超額代碼抱歉。我對堆棧和Web開發相當陌生。 – Kelsey

HTML：

<a class="link" href="www.google.com">My link</a>

CSS：

.link:hover{ 
    color: #b27bae; 
}

來源

2013-12-10 02:20:36 Mauricio

不行，謝謝。 – Kelsey

在你的CSS試試這個：

#index-15 a:hover{ 
color:#b27bae; 
}

來源

2013-12-10 02:21:47

不起作用，謝謝。 – Kelsey

如何使鏈接更改顏色上懸停

回答

相關問題