简体   繁体   English

CSS过渡在加载时使用链接和输入元素触发(chrome)

[英]CSS transition being fired upon load with link and input elements (chrome)

I'm having some troubles using a link and an input element simultaneously, which is pretty odd! 我在同时使用链接和输入元素时遇到了一些麻烦,这很奇怪!

CSS transitions are being fired upon load, even tho I'm using an hover effect and only if the input element is present on the site. 加载时会触发CSS过渡,即使我使用悬停效果也是如此,并且前提是网站上存在input元素。 All this is for Chrome, haven't tested this in other browsers. 所有这些都是针对Chrome的,尚未在其他浏览器中进行过测试。

Here is my code simplified to the issue at hand: 这是我的代码简化为当前的问题:

HTML: HTML:

<input type="text" placeholder="Test search" />
<a href="#">Test</a>

CSS: CSS:

a {
    background: #000;
    transition: background 3s ease;
}

a:hover {
    background: none;
}

Link to example: https://embed.plnkr.co/ri5FknRdbPDY7T2lNldS/ Try and refresh the live preview a couple of times to see the issue. 链接到示例: https : //embed.plnkr.co/ri5FknRdbPDY7T2lNldS/尝试并刷新实时预览几次,以查看问题。 (This will not work on JSFiddle or Codepen, simple because they use internal styles. To reproduce this problem the styling has to come from an external stylesheet which is why I created this on Plunker.) (这在JSFiddle或Codepen上不起作用,很简单,因为它们使用内部样式。要重现此问题,样式必须来自外部样式表,这就是我在Plunker上创建此样式的原因。)

If I inline the css code in style tags in the head, there is no problem. 如果我将css代码内联在头部的样式标签中,则没有问题。 If I remove the input element, there is no problem either. 如果删除输入元素,也没有问题。 And it seems only to be a problem on link elements. 这似乎只是链接元素上的问题。

What is going on here? 这里发生了什么? :) - Thanks! :) - 谢谢!

This is a Chrome bug, and it has been reported. 这是一个Chrome错误,并且已经报告。

A hacky way to fix this is to include a script tag somewhere on the site. 解决此问题的一种怪异方法是在网站上的某个位置添加脚本标签。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM