冂木. 2023-10-10 23:31 采纳率: 50%
浏览 16

关于HTML中鼠标改变输入框颜色

要求：设置鼠标悬停、点击和释放间，元素成为焦点后不同的输入框背景颜色


<style>
        .mytext{text-align: center;}
         tr{text-align:justify;}
      ** .name:hover {bakeground-color:red};
        .name:active {background-color:green};
        .name:focus {background-color:#FFB03B};**
        .bianse:active {color: #F0F;}
    </style> 
</head>

<body><h2  class="mytext">学生信息注册</h2>
    <from name="stu" action="" methon="post">
        <table border="1" align="center" cellpadding="6" cellspacing="2">
            **<tr>
                <td>姓名：</td>
                <td><input name="userName" type="text" autofocus="" class="name"></td>
                <td><span class="bianse">要求1</span></td></tr>**

问题：不知道错误出在哪，没有显示错误，但是鼠标经过、点击等都没有颜色变化，请问这个应该问题出在哪里，自己看了很久都没找到><!!

​

  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-10-11 10:48
    关注

    【相关推荐】



    • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7705201
    • 你也可以参考下这篇文章：在点击用户退出登录时，再按浏览器的后退按钮，仍然能够看到之前的页面；将浏览器的后退按钮禁止掉
    • 您还可以看一下 郑逊敏老师的抖音快手短视频自媒体制作引流运营兼职创业赚钱盈利实战教程课程中的 巧妙借势热点，实现快速涨粉小节, 巩固相关知识点
    • 除此之外, 这篇博客: html中的定位知识点如何使用中的         这个是基于上面的绝对定位和相对定位以及项目实战得出的一个应用点，就是给元素自身设置为绝对定位后，一般都给父级元素设置为相对定位，也就是子绝父相； 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

              举个例子，刚刚在第四点里面我用了绝对定位，我不想他的参考点是浏览器左上角，而是最外层的这个大盒子，那么我就去给大盒子添加一个相对定位，整个代码如下：

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 大盒子的样式 */
        .a1 {
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative;
            margin: 10px 10px;
            position: relative;
        }
        /* 盒子1号的样式 */
        .a2 {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        /* 盒子2号的样式 */
        .a3 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute; /*设置为绝对定位*/
            top: 20px;
            left: 20px;
        }
        .a4 {
            width: 100px;
            height: 100px;
            background-color:antiquewhite;
        }
    </style>

</head>

<body>
    <div class="a1">
        <div class="a2">盒子1号</div>
        <div class="a3">盒子2号</div>
        <div class="a4">盒子3号</div>
    </div>
</body>

</html>

      效果如下，这样参考点就变成了大盒子的左上角，一般在项目中就是这样使用的，既然小盒子在大盒子之中，就要参考点设置为大盒子，这样更好操作：

       


    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题？

问题事件

  • 创建了问题 10月10日

悬赏问题

  • ¥50 rk3588板端推理
  • ¥50 opencv怎么去掉 数字0中间的斜杠。
  • ¥15 这种情况的伯德图和奈奎斯特曲线怎么分析？
  • ¥50 paddleocr带斜线的0很容易识别成9
  • ¥15 电子档案元素采集（tiff及PDF扫描图片）
  • ¥15 flink-sql-connector-rabbitmq使用
  • ¥15 zynq7015,PCIE读写延时偏大
  • ¥15 使用spss做psm（倾向性评分匹配）遇到问题
  • ¥20 vue+UEditor附件上传问题
  • ¥15 想做个WPS的自动化代码，不知道能做的起不。