Html 无法在登录按钮上使用鼠标悬停

当我将鼠标悬停在登录按钮上时，我希望能够更改登录按钮（id为=“loginbtn”的按钮）的颜色，下面是html代码：

<template >
   <div class="login background" style="height:100%" >
      <div style="color:#76323F">{{error}}</div>
      <button id="signbtn" v-on:click="signup">Signup</button>
      <button v-on:click="calendar">Calendar</button>
      <div>
         <div class="container col-lg-2 col-md-3 col-sm-4 col-xs-6 " style="margin-top:300px" >
            <div class="input-group" style="margin-top:15px;">
               <span class="input-group-addon" id="basic-addon1" style="background-color:#C09F80;border-color:#C09F80;opacity:.8;color:#76323F;" > <span class="glyphicon glyphicon-user"></span></span>
               <input type="text" v-model="username" id="inputUsername" name="username"  class="form-control col-lg-1"  required autofocus  placeholder="Username" aria-describedby="basic-addon1" style="opacity:.8;color:#76323F;font-weight:bold;">
            </div>
            <div class="input-group" style="margin-top:15px;">
               <span class="input-group-addon" style="background-color:#C09F80;border-color:#C09F80;opacity:.8;color:#76323F;">
                  <i class="glyphicon glyphicon-lock"></i>
               </span>
               <input  v-model="password" type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required autofocus style="opacity:.8;color:#76323F;font-weight:bold;"/>
            </div>
            <button id="loginbtn"v-on:click="submit" class="btn btn-lg btn-primary btn-block" style=".btn-primary{color:#C09F80;color:#C09F80;background-color:#76323F;border-color:#76323F;margin-top:20px;}" type="submit">Log in</button>              
         </div>
      </div>
   </div>
</template>

{{error}}
报名
历法
登录

在CSS中使用

#loginbtn:hover{background color:yellow；}

（或任何您想要的颜色）

如果由于您使用的内联样式而无法工作，请将这些内联样式从HTML代码中移到样式表中：

#登录{
颜色：#C09F80；
背景色：#76323F；
边框颜色：#76323F；
边缘顶部：20px；
}
#登录：悬停{
背景颜色：黄色；
}

登录

在CSS中使用

#loginbtn:hover{background color:yellow；}

（或任何您想要的颜色）

如果由于您使用的内联样式而无法工作，请将这些内联样式从HTML代码中移到样式表中：

#登录{
颜色：#C09F80；
背景色：#76323F；
边框颜色：#76323F；
边缘顶部：20px；
}
#登录：悬停{
背景颜色：黄色；
}

---

登录

如果您只想更改悬停时单个按钮（而不是按钮类别）的颜色，则可以将这些属性添加到标记中：

onMouseOver="this.style.color='#HexCodeForHoverColor'"
onMouseOut="this.style.color='#HexCodeForNormalBackground'"

您还可以将颜色更改为背景色--不确定您在做什么时想要哪种颜色

如果您愿意，我可以包含CSS代码来实现相同的功能，但是如果您只想为一个按钮执行此操作，那么这并不是必需的

有人问了一个非常类似的问题（Alex S.发布了与我给你的答案基本相同的答案）

这是一个演示。显然，这在外观上是非常基本的。

测试


测试

如果您只想更改悬停时单个按钮（而不是一类按钮）的颜色，则可以将这些属性添加到标记中：

onMouseOver="this.style.color='#HexCodeForHoverColor'"
onMouseOut="this.style.color='#HexCodeForNormalBackground'"

您还可以将颜色更改为背景色--不确定您在做什么时想要哪种颜色

如果您愿意，我可以包含CSS代码来实现相同的功能，但是如果您只想为一个按钮执行此操作，那么这并不是必需的

有人问了一个非常类似的问题（Alex S.发布了与我给你的答案基本相同的答案）

这是一个演示。显然，这在外观上是非常基本的。

测试


测试