Question

我在悬停时做了一个按钮转换，这很好，但是当我点击提交按钮时，它的默认动画会更改为指定的转换，并且点击感觉太慢。如何避免点击按钮的过渡动画？

另一个子问题是：如何更改输入电子邮件文本框的边框颜色以及按钮悬停？

nother

＆＃13;

.novice_btn {
  font-family: 'Raleway';
  font-size: 11px;
  color: #ffffff;
  letter-spacing: 1px;
  background: #99745c;
  width: 80px;
  height: 32px;
  outline: none;
  border: 1px solid;
  border-color: #99745c;
  margin-top: 40px;
  margin-left: -1px;
  
  /*transition*/
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

.novice_btn:hover {
  background: #4B301F;
  border-color: #4B301F;
}

.novice_input {
	font-family: 'Raleway';
	font-size: 11px;
	color: #000000;
	padding: 10px;
	width: 400px;
	height: 10px;
	outline:none; 
	border: 1px solid;
	border-color: #99745c;
	margin-top: 40px;	
}

/* BORDER TEXTBOX */

.novice_btn:hover  .novice_input{
	border-color: #4B301F;
}

＆＃13;

<table height="30" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <input class="novice_input" placeholder="Email" type="text"></input>
    </td>
    <td>
      <input class="novice_btn" value="Send" type="submit"></input>
    </td>
    <tr>
</table>

＆＃13;

Answer 1

在显示的HTML代码中，您无法选择文本输入，因为任何CSS选择器都无法访问它。但是，这可以通过JavaScript完成。

一些jQuery：

$('.novice_button').mouseover(function () {
   $('.novice_input').css({'border-color': 'black'});
});
// and some code for reset styling

对于按钮问题，尝试：

.novice_button:active {
   transition: 0s;
   background-color: #4B301F;
}

如果这不是您想要的，请回复评论，我很乐意提供帮助。

如何在不影响提交按钮点击动画的情况下进行转换？

1 个答案: