css、js、jquery下鼠标变色样例

最新推荐文章于 2023-04-21 11:31:22 发布

大佳a

最新推荐文章于 2023-04-21 11:31:22 发布

阅读量488

点赞数 1

本文链接：https://blog.csdn.net/weixin_45691337/article/details/102879851

版权

鼠标变色在网页中是常用的一种技巧，通过鼠标变色在适当的场景下改变元素甚至是页面的样式，让用户选择操作后样式发生改变等是一种良好的人机交互，这里分别介绍三种不同的鼠标变色方法
1.利用css中的伪类选择器实现
相关代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .out{
                background-color: #a81414;
                color:white;
                font-family: '微软雅黑';
                font-size: 17px;
            }
            .out:hover{
                background-color: #95f3ff;
                color:black;
                font-family: '宋体';
            }
        </style>
    </head>
    <body>
        <input type="button"  class="out" value="鼠标移上去改变样式">
    </body>
</html>

效果图：
在这里插入图片描述
2.使用js鼠标事件实现
相关代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .out{
                background-color: hsl(0, 81%, 79%);
                color:#131212;
                font-family: '微软雅黑';
                font-size: 17px;
            }
            .over{
                background-color: #031770;
                color:#faf8f8;
                font-family: '宋体';
                font-size: 17px;
            }
        </style>
        <script>
            window.onload=init;
            function init(){
                var btn=document.getElementById("btndome");
                btn.onmouseover=function(){
                    btn.className="over";
                }
                btn.onmouseout=function(){
                    btn.className="out";
                }
            }
            
        </script>
    </head>
    <body>
        <input type="button" id="btndome" class="out" value="鼠标移上去改变样式">

    </body>
</html>

效果图：
在这里插入图片描述

3.利用jQuery实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery-3.4.1.min.js"></script>
        <style>
            .bg{
                background-color: #aaf1f3;
                color:#0a0a0a;
                font-size: 17px;
            }
            .over{
                background-color: hsl(147, 89%, 14%);
                color:#faf8f8;
                font-family: '宋体';
                font-size: 17px;
            }
        </style>
        <script>
           $(function(){
               $("#btndome").addClass("bg");
               $("#btndome")
               .mouseover(function(){$(this).addClass("over");})//鼠标移上去增加新class属性
               .mouseout(function(){$(this).removeClass("over");});//鼠标移开去掉该class属性
           });
        </script>
    </head>
    <body>
        <input type="button" id="btndome"  value="鼠标移上去改变样式">

    </body>
</html>

效果图：
在这里插入图片描述

说明：虽然直接使用CSS的hover属性就可以实现改变样式的效果，但是CSS设置的样式是静态的、不能改变的，而使用js和jQuery不仅方便许多而且更灵活。像上面的例子，看不出来使用jQuery要方便一点，但是当你制作一个表格的时候，你希望它能实现隔行变色这类的效果，用css的话就要每行每行去设置，但使用jQuery就会显得简单多了，在很多复杂的改变样式的操作中，使用jQuery是十分方便的。

总结：1.关于博客：写了十天的博客，这些内容有些是自己在刚开始学习web的时候遇到的难题，有些是自己觉得重要应该整理记录的内容，十天下来将这些难题用自己理解的方式展现出来让自己对它们的理解更深了一些，即使现在看这些问题会觉得很简单，但是刚开始自己拿到的时候确实感觉很困难，而现在自己能讲出来确实觉得收获很大。2.关于学习进度：这十天除了学习JS和jQuery框架的知识，更重要的是将前面HTML和CSS部分的知识掌握的更牢固了。之前自己对盒子模型已经布局方面的知识点都是含糊不清的，只知道大致的属性和属性值也没有真正自己实践去试过这些，而这十天中，自己亲自尝试了很多，发现其实有些属性实际操作起来和自己理解起来还是有些偏差，还有很多属性一起使用的时候有些属性会失效等等，而对于后面框架内容的学习也是使用起来不熟练的，还需要下一个十天来多加练习。3.关于提交的网页：复试所要编写的网页我大多是用布局写的，以flex布局、流动布局为主，并且我在博客中所写的全部内容都应用到了自己写的网页中，以便加深自己的理解。但其实自己知道自己写的网页有很多不足的地方，有些细节的处理也不是很到位，虽然自己的网页写的很简单，但是从这十天的学习中还是收获了很多。
十天来还是了解了不少关于前端的知识，但是都不敢拍着胸脯说自己精通什么，学习前端自己还是知道的太少，即使了解一些也只是九牛一毛微不足道，但是知道自己要学的内容还很多也给迷茫的自己找到了一些需要奋斗的东西，很知足，这十天，每天都在学习一点新的知识，就感觉这种状态很棒，希望以后的自己每天都过的如此！加油！！冲！冲！冲！

大佳a

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css、js、jquery下鼠标变色样例

鼠标变色在网页中是常用的一种技巧，通过鼠标变色在适当的场景下改变元素甚至是页面的样式，让用户选择操作后样式发生改变等是一种良好的人机交互，这里分别介绍三种不同的鼠标变色方法1.利用css中的伪类选择器实现相关代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
复制链接

扫一扫