单击后，提交按钮保持悬停颜色

时间：2015-03-12 17:39:23

标签： html css

点击“提交”后，或者＆＃39;重置＆＃39;按钮，按钮颜色保持悬停颜色，不会返回原始＆＃34;预先单击＆＃34;按钮颜色，直到您单击页面中的其他位置。

我基本上希望按钮颜色在单击后更改回原始颜色。谁能建议怎么做？

CSS / HTML：

＆＃13;
＆＃13; 
.form input:focus {
  background: #FFFFAD;
  outline: none;
}
.buttons {
  text-align: left;
}
.buttons input {
  font-size: 2.5em;
  font-weight: bold;
  font-family: "Arial", serif;
  padding: 8px 40px;
  background: #4470B6;
  border: 0px;
  margin-left: 0px;
  margin-right: 50px;
  margin-top: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  color: #FFFAFA;
}
.buttons input:hover,
.buttons input:focus {
  background-color: #50627E;
  outline: none;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
＆＃13; 
<!--  Details Form -->

<section class="details">
  <form id="form" action="test.php" method="post" autocomplete="on" target="_blank">

    <div class="form">
      <label>First Name:</label>
      <input type="text" name="firstname" placeholder="First Name" autofocus />
    </div>

    <div class="buttons">
      <input type="submit" value="Search">
      <input type="reset" value="Reset">
    </div>
  </form>
</section>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：3)

您非常接近解决方案。为了达到您想要的效果，请尝试使用focus和active代替hover和focus。

active状态仅在单击元素时触发。

这就是我做的事情

.buttons input:focus {
  outline: none
}
.buttons input:active {
  border: 0;
  background-color: #50627E;
  outline: none;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}

您可以查看下面的完整解决方案：

.form input:focus {
  background: #FFFFAD;
  outline: none;
}
.buttons {
  text-align: left;
}
.buttons input {
  font-size: 2.5em;
  font-weight: bold;
  font-family: "Arial", serif;
  padding: 8px 40px;
  background: #4470B6;
  border: 0px;
  margin-left: 0px;
  margin-right: 50px;
  margin-top: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  color: #FFFAFA;
}

.buttons input:focus {
  outline: none
}
.buttons input:active {
  border: 0;
  background-color: #50627E;
  outline: none;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
<!--  Details Form -->

<section class="details">
  <form id="form" action="test.php" method="post" autocomplete="on" target="_blank">

    <div class="form">
      <label>First Name:</label>
      <input type="text" name="firstname" placeholder="First Name" autofocus />
    </div>

    <div class="buttons">
      <input type="submit" value="Search">
      <input type="reset" value="Reset">
    </div>
  </form>
</section>

答案 1 :(得分：2)

我假设你在焦点上设置你的按钮样式以摆脱轮廓，所以简单地将选择器分成2并且在焦点上只删除轮廓：

.form input:focus {
  background: #FFFFAD;
  outline: none;
}
.buttons {
  text-align: left;
}
.buttons input {
  font-size: 2.5em;
  font-weight: bold;
  font-family: "Arial", serif;
  padding: 8px 40px;
  background: #4470B6;
  border: 0px;
  margin-left: 0px;
  margin-right: 50px;
  margin-top: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  color: #FFFAFA;
}
.buttons input:hover
{
  background-color: #50627E;
  outline: none;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
.buttons input:focus {
  outline: none;
}
<!--  Details Form -->

<section class="details">
  <form id="form" action="test.php" method="post" autocomplete="on" target="_blank">

    <div class="form">
      <label>First Name:</label>
      <input type="text" name="firstname" placeholder="First Name" autofocus />
    </div>

    <div class="buttons">
      <input type="submit" value="Search">
      <input type="reset" value="Reset">
    </div>
  </form>
</section>

答案 2 :(得分：0)

因为:hover和:focus背景颜色相同 所以我只添加:hover的背景颜色，:focus

没有背景颜色

如果您希望可以删除此类表单css .buttons input:focus

＆＃13;
＆＃13; 
.form input:focus {
  background: #FFFFAD;
  outline: none;
}
.buttons {
  text-align: left;
}
.buttons input {
  font-size: 2.5em;
  font-weight: bold;
  font-family: "Arial", serif;
  padding: 8px 40px;
  background: #4470B6;
  border: 0px;
  margin-left: 0px;
  margin-right: 50px;
  margin-top: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  box-shadow: 0 0 4px rgba(0, 0, 0, .75);
  color: #FFFAFA;
}
.buttons input:hover,
.buttons input:focus {
  
  outline: none;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  box-shadow: 0 0 1px rgba(0, 0, 0, .75);
}
.buttons input:hover{
background-color: #50627E;}
＆＃13; 
<!--  Details Form -->

<section class="details">
  <form id="form" action="test.php" method="post" autocomplete="on" target="_blank">

    <div class="form">
      <label>First Name:</label>
      <input type="text" name="firstname" placeholder="First Name" autofocus />
    </div>

    <div class="buttons">
      <input type="submit" value="Search">
      <input type="reset" value="Reset">
    </div>
  </form>
</section>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：-1)

因为我在移动设备上遇到了同样的问题。移动设备具有粘性悬停功能。以@media（hover：hover）样式结束。 参考文字：

例如，您可以在媒体查询中定义常规的：hover样式（@media hover：hover {}），以将其限制为完全支持：hover的设备（配备鼠标或某些指向设备的设备）：< / p> 

 @media (hover:hover) {
    nav a:hover{
        background: yellow;
    }
}

或者采用更先进的方法使原始：hover样式保持不变，将不完全支持：hover的目标设备定位：

@media (hover:none), (hover:on-demand) {
    nav a:hover{ /* suppress hover effect on devices that don't support hover fully
        background: none;
    }
}

参考：http://javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml

这是How to prevent sticky hover effects for buttons on touch devices

相关问题
最新问题