如何在悬停时使链接更改颜色

时间:2013-12-10 02:08:48

标签: jquery html css

无法弄清楚这一点..我正试图这样做当你将鼠标悬停在支付选项和就业机会下面的文本上时,它会改变颜色:#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>

2 个答案:

答案 0 :(得分:1)

你的CSS上的

试试这个:

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

答案 1 :(得分:0)

HTML:

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

CSS:

.link:hover{
    color: #b27bae;
}