Question

当我将鼠标悬停在其上时，我希望能够更改我的登录按钮的颜色（带有id =＆＃34; loginbtn＆＃34;的按钮），这里是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>

Answer 1

在CSS中使用#loginbtn:hover { background-color:yellow; }（或任何你想要的颜色）。

如果由于您使用的内联样式而无效，请将HTML代码中的内联样式移到样式表中：

＆＃13;

#loginbtn {
  color: #C09F80;
  background-color: #76323F;
  border-color: #76323F;
  margin-top: 20px;
}

#loginbtn:hover {
  background-color: yellow;
}

＆＃13;

<button id="loginbtn" v-on:click="submit" class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>

＆＃13;

Answer 2

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

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

您还可以将颜色更改为backgroundColor - 不确定您想要的是哪一个。

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

一个非常类似的问题被问到here（Alex S.发布的答案与我给你的答案基本相同）。

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

＆＃13;

<button onMouseOver="this.style.color='#00ffff'"
   onMouseOut="this.style.color='#000000'">Test</button> <!-- Example of text color -->
   
<br>

<button onMouseOver="this.style.backgroundColor='#00ffff'"
   onMouseOut="this.style.backgroundColor=''">Test</button> <!-- Example with background color -->

＆＃13;

无法悬停在登录按钮上工作

2 个答案: