CSS3悬停输入按钮答案

【问题标题】：Css3 hover input buttonCSS3悬停输入按钮
【发布时间】：2014-03-17 16:58:58
【问题描述】：

我正在为我的网站制作一个 css3 悬停效果按钮，但似乎 <input> 上的效果不起作用。

我想做什么：在这个 DEMO 上你会看到我想要做什么：

<button class="some classes">Contact</button>

问题出现在我的联系表单的<input> 上，因为它不起作用。

我正在尝试解决问题，但我不知道我错过了什么。

演示更新：JSFIDDLE

我应该尝试让表单在没有输入的情况下工作吗？

提前致谢

【问题讨论】：

它适用于我在 Chrome 33 上。当我将鼠标悬停在按钮上时，文本颜色会平滑地显示动画效果。
问题在于我不想只为文本颜色设置动画，如果您查看演示，您将（在蓝色部分内）使用不同的按钮。我只想和中间底部的一样。
从我后廊的人看来不错。我也在 chrome 上……刚刚在 Safari 和 Firefox 上也检查过（最新版本）。工作得很好。我有一个 mac，所以无法检查 IE。
jsfiddle中只有一个按钮...
查看帖子的第二行（顺便说一句，我会对其进行编辑以使其更明显）

标签： html css

【解决方案1】：

我进行了一些更改 (jsfiddle)，现在它可以工作了，但除其他外，<inputs> 必须替换为 <buttons>。为什么？因为input 元素不能包含子元素，所以:after 伪元素不会被渲染。除此之外，您还需要为您的 :after 元素设置 content 和 position 属性：

button[type="submit"]:after {
   content: '';
   position: absolute;
   display: block;
   width: 100%;
   height: 0;
   top: 50%;
   left: 50%;
   background: #fff;
   opacity: 0;
   -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -moz-transform: translateX(-20%) translateY(-20%) rotate(45deg);
   -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

已编辑要在 :after 元素中进行转换：

button[type="submit"]:after {
   content: '';
   position: absolute;
   display: block;
   width: 100%;
   height: 0;
   top: 50%;
   left: 50%;
   background: #fff;
   opacity: 0;
   -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -moz-transform: translateX(-20%) translateY(-20%) rotate(45deg);
   -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -webkit-transtion: all 0.3s;
   -moz-transition: all 0.3s;
   transition: all 0.3s;
}

新jsfiddle.

【讨论】：

它工作正常，但为什么转换不起作用？如果您检查第一个，您将在不透明度显示之前看到它的转换方式：1
您没有元素的转换...我将更新 jsfiddle。

【解决方案2】：

我认为您必须在不使用 <input> 元素的情况下完成这项工作。像 :before 和 :after 这样的伪元素只能为容器元素呈现，因为它们实际上最终在元素内部。由于<input> 不是容器元素，因此您不能仅通过纯 CSS 使用此代码。（一旦你引入了 JavaScript，也许可以，但我不确定你是否想为按钮效果创建那么多开销。）

如果您想了解更多信息，这里有一个指向 StackOverflow 上的 another question 的链接，与您的链接相同。希望这会有所帮助！

【讨论】：