Question

我尝试在徘徊时转换元素，就像那样：

＆＃13;

span{
  transition: transform 0.35s;
}
span:hover{
  transform: translateY(30px);
}

＆＃13;

<span>test</span>

＆＃13;

在IE上，它运行良好，但不适用于Chrome和Firefox。它将返回其原始位置。

我发现如果将display:block添加到span，它会很好（对Firefox也没什么问题），但是为什么？有更好的方法吗？

Answer 1

我认为它会返回到原始位置，因为它会在物理上移动并且鼠标在翻译后不再盘旋该元素。

一些想法：

1）如果你希望元素在鼠标悬停时保持移动但在鼠标离开时返回，也许你可以在padding而不是translate上进行CSS3过渡，这样就可以了内容将移动，但DOM中的框将保留以保持:hover效果

2）如果你希望元素保留在原位并且在悬停后不返回，你可能会想要在悬停并为该类设置样式后使用Javascript向该元素添加一个类

祝你好运！

Answer 2

我希望能提供帮助。 Firefox的问题是 translateY 仅适用于div，因此：

将 span 放入div

Answer 3

可转换元素是以下类别之一的元素：


一个元素，其布局由CSS框模型控制，该模型是块级或原子内联级元素，或者其显示属性计算到表格 - row，table-row-group，table-header-group，table-footer-group，table-cell或table-caption [CSS21]

SVG名称空间中的一个元素，不受CSS框模型的控制，该模型具有属性transform，'patternTransform'或gradientTransform [SVG11]。

来自w3 specification。

所以inline-block元素，inline-table元素，replaced inline-level elements（想象img，video等）以及可能的其他atomic inline-level element都是可转换的内联级元素。

如果您将display block，inline-block或inline-table设置为span{ transition: transform 0.35s; display:inline-block; } span:hover{ transform: translateY(30px); }，则会将其视为可转换元素，否则将无法使用。浏览器对非可变形元素的作用未指定。

＆＃13;

<span>test</span>

＆＃13;

djabase=# CREATE or REPLACE FUNCTION upset(domain_name varchar)
RETURNS TABLE (id int, domain varchar(50)) AS $$
BEGIN
SELECT domain from separser_domains where domain=$1;
EXCEPTION
when sqlstate 'no_data' then
INSERT into separser_domains(domain) VALUES (domain_name);
END; $$
LANGUAGE 'sql' STABLE;
ERROR:  syntax error at or near "SELECT"
LINE 4: SELECT domain from separser_domains where domain=$1;

＆＃13;

为什么内联元素会在它悬停时进行转换时返回到原始位置？

3 个答案: