鼠标经过改变颜色

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>qwer</title><base target="_blank" />
    <meta charset="utf-8" />
    <style type="text/css">
        a{color:pink;font-size:32px}
        a.hovertree{text-decoration:none;font-size:32px;color:blue}
        a.hovertree:visited{color: #333333;}
        a.hovertree:hover {
            color: #00FF00;
            text-decoration:underline;
        }
    </style>
    <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
    <script>
        //改变全部链接颜色
        function changeAllHovertree(color) {
            if (color == undefined || color == "") color = "red";
                $("a").on("mouseover", function () { $(this).css("color", color) }).on("mouseleave", function () { $(this).css("color", "") })
           
        }
        //改变指定链接颜色
        function changeHovertree(idhovertree, classhovertree, color) {
            if (color == undefined || color == "") color = "red";
            if (classhovertree == undefined || classhovertree == "")
                classhovertree = ".hovert" + "ree";
            else
                classhovertree = "." + classhovertree;
            if (idhovertree == '')
                $("a" + classhovertree).on("mouseover", function () { $(this).css("color", color) }).on("mouseleave", function () { $(this).css("color", "") })
            else
                $("#" + idhovertree).on("mouseover", function () { $("#" + idhovertree).css("color", color) }).on("mouseleave", function () { $("#" + idhovertree).css("color", "") })

        }
    </script>
</head>
<body>
    <div><br /><input type="button" value="改变下面全部链接鼠标经过的颜色" onclick="changeHovertree('')" /><br />
      <a id="ahovertree" href="http://www.baidu.com" class="hovertree">原文</a>
        <input type="button" value="改变鼠标经过颜色" onclick="changeHovertree('ahovert'+'ree')" /><br />
      <a id="bhovertree" href="http://www.baidu.com/" class="hovertree">jQuery</a>
        <input type="button" value="改变鼠标经过颜色为粉色" onclick="changeHovertree('bhovertree', '', 'pink')" /><br />
      <a id="chovertree" href="http://www.baidu.com/"
      class="hovertree">JQuery实现锚点平滑滚动</a>
        <input type="button" value="改变鼠标经过颜色" onclick="changeHovertree('chov'+'ertree')" /><br />
      <a id="dhovertree" href="http://hovertree.com/hvtart/bjae/vgkgit00.htm" class="hovertree">哎呦,不错哦,JavaScript</a>
        <input type="button" value="改变鼠标经过颜色" onclick="changeHovertree('dhover'+'tree')" /><br />
      <a id="ehovertree" href="http://www.baidu.com/" class="hovertree">下雨特效</a>
        <input type="button" value="改变鼠标经过颜色" onclick="changeHovertree('eh'+'overtree')" /><br />
        <input type="button" value="改变页面中全部链接鼠标经过的颜色为浅灰色" onclick="changeAllHovertree('silver')" />
</div>
</body>
</html>

 

posted @ 2015-12-21 20:22  灵昃子  阅读(552)  评论(0编辑  收藏  举报