无法弄清楚这一点..我正试图这样做当你将鼠标悬停在支付选项和就业机会下面的文本上时,它会改变颜色:#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>
答案 0 :(得分:1)
试试这个:
#index-15 a:hover{
color:#b27bae;
}
答案 1 :(得分:0)
HTML:
<a class="link" href="www.google.com">My link</a>
CSS:
.link:hover{
color: #b27bae;
}