Question

我有类似内容的这些链接

<a href="#"><i class="icon-instagram"></i></a>

现在我已将它们称为

.top-social-icons a i.icon-instagram{
    background:#DB97BE;
    padding:7px;
    transition-duration:800ms;
    transition-property: width, background;transition-timing-function:ease;
}

.top-social-icons a i.icon-instagram:hover{
    background:transparent;
    transition-duration:800ms;
    transition-property: width, background;
    transition-timing-function:ease;
}

除了IE之外，

在每个浏览器中都有效。我一直在为此而烦恼。对不起，如果我发布到马虎这只是我第二次发布在这里。我假设它与包含在a标签中的i标签有关？

link to site

Answer 1

您的html页面顶部是否有<!doctype html>变形？来自w3Schools，即在:hover以外的元素上使用a psedoclass（您在i标签上使用它）时需要它

注意：在IE中，必须为：hover声明<!DOCTYPE> 选择器用于处理除<a>元素之外的其他元素。

Answer 2

请尝试删除transition- property。你应该声明一次

.top-social-icons a i.icon-instagram:hover{
    background:transparent;
    /*transition-duration:800ms;
    transition-property: width, background;
    transition-timing-function:ease;*/
}

Answer 3

就像Eru所说，对于非锚标签也添加了一个doctype，但在这个修改过的CSS中没有必要：

<!doctype html>

对于现代跨浏览器转换（可能仅适用于带转换的IE10 +）支持：

.top-social-icons a { -webkit-transition: 0.8s ease background, 0.8s ease width;
-moz-transition: 0.8s ease background, 0.8s ease width;
-ms-transition: 0.8s ease background, 0.8s ease width;
-o-transition: 0.8s ease background, 0.8s ease width;
transition: 0.8s ease background, 0.8s ease width; }
.top-social-icons a i.icon-youtube{background:#CB2027;padding:7px}
.top-social-icons a:hover i.icon-youtube{background:none}
.top-social-icons a i.icon-twitter{background:#359BED;padding:7px}
.top-social-icons a:hover i.icon-twitter{background:none}
.top-social-icons a i.icon-facebook{background:#3C5B9B;padding:7px}
.top-social-icons a:hover i.icon-facebook{background:none}
.top-social-icons a i.icon-instagram{background:#DB97BE;padding:7px}
.top-social-icons a:hover i.icon-instagram{background:transparent}

Answer 4

<强> HTML

 <div class="top-social-icons">
    <a href="#"><i class="icon-instagram">Insta</i></a>
    </div>

<强> CSS

.top-social-icons a i.icon-instagram{
    background:#DB97BE;
    padding:7px;
    transition-duration:800ms;
    transition-property: width, background;transition-timing-function:ease;
}

.top-social-icons a i.icon-instagram:hover{
    background:transparent;
    transition-duration:800ms;
    transition-property: width, background;
    transition-timing-function:ease;
}

Fiddle Demo

Compatibility browser support for transition effects

CSS悬停不在包含在标签中的IE i标签中工作

4 个答案: