onmouseover和onmouseout应用于RadioButtonList或CheckBoxList

最新推荐文章于 2014-04-22 11:21:40 发布

原创最新推荐文章于 2014-04-22 11:21:40 发布 · 869 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一种使用JavaScript为页面中的标签添加鼠标悬停效果的方法。通过获取元素并设置onmouseover及onmouseout事件，实现了字体加粗及颜色变化的效果。此外，还定义了两种CSS样式用以区分鼠标悬停前后的样式。

<script type="text/javascript">
        function windowOnLoad() {
            var rbl = document.getElementById('<%= RadioButtonListFivePhases.ClientID %>');
            var labels = rbl.getElementsByTagName('label');

            for (var i = 0; i < labels.length; i++) {
                var lbl = labels[i];

                lbl.onmouseover = function () {
                    this.className = 'overStyle';
                };

                lbl.onmouseout = function () {
                    this.className = 'outStyle';
                };
            }
        }
        window.onload = windowOnLoad;
    </script><style type="text/css">
        .overStyle {
            font-weight: bold;
            color: #f00;
        }

        .outStyle {
            font-weight: normal;
            color: none;
        }
    </style>