Question

我有一个简单的语言选择页面，带有纯CSS动画过渡。我做了一个jsFiddle here。

它应该如何表现如下：

用户将鼠标悬停在两个（或多个）语言选择器中的一个上。
语言选择器向上转换并达到完全不透明度。相关语言文本（例如，英语，西班牙语）也会出现。
用户点击链接或鼠标移出，在这种情况下，转换会反转。

在Chrome中，它的行为符合预期。

在Firefox中，当我将鼠标移到一个图像上时，两个都会向上移动。

在Opera中，它的行为大多与预期的一样，但文本在向上移动后会跳回来。

我正在尝试理解为什么会在这些浏览器中发生这种情况，以及如果可能的话我如何修复它。

在jsFiddle关闭的情况下，相关代码为：

HTML

<div id="container"><div id="cell">
    <div class="langcell"><a href="en/index.html">
        <img src="http://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/200px-Flag_of_the_United_States.svg.png" /><br/><p>English</p></a>
    </div>
    <div class="langcell"><a href="es/index.html">
        <img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg.png" /><br/><p>Espa&ntilde;ol</p></a>
    </div>
</div></div>

CSS

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#container {
    width: 100%;
    height: 100%;
    display: table;
}
#cell {
    display: table-cell; vertical-align: middle; text-align: center;
}
.langcell {
    display: inline-block;
    margin: auto 1em;
}
a {
    position: relative;
    top: 0;
    -webkit-transition: top 0.25s;
    -moz-transition: top 0.25s;
    -o-transition: top 0.25s;
    transition: top 0.25s;
    color: black;
    text-decoration: none;
}
a:hover {
    top: -16pt;
}
a p {
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
    font-family: Verdana, Geneva, sans-serif;
    letter-spacing: 0.05em;
    opacity: 0;
    -webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
a:hover p {
    opacity: 1;
}
a img {
    opacity: 0.65;
    -webkit-transition: opacity 0.25s;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
a:hover img {
    opacity: 1;
}

Answer 1

我在firefox（v12）上遇到了奇怪的问题，它在悬停时将两个元素都移动了。后来的版本（19v）似乎已经解决了。

我认为你的选择器会发生一些事情，以及mozilla如何解释与webkit相比的事情。看看这个jsfiddle是否适合您。

我真正做的就是将a的许多选择器更改为.langcell，它似乎有效。我不得不重新调整一点css来实现相同的样式，比如嵌套的.langcell a选择器。我怀疑这可能是由于a默认为内联，而p是阻止而img是内联阻止。

我不会撒谎并且说我完全理解为什么会发生这种情况，但总的来说，为元素赋予类的样式不仅仅是一种偏好，它在渲染时也更有效。

CSS Selector Performance

代码：

    .langcell {
        display: inline-block;
        margin: auto 1em;
        position: relative;
        top: 0;
        -webkit-transition: top 0.25s;
        -moz-transition: top 0.25s;
        -o-transition: top 0.25s;
        transition: top 0.25s;
    }

    .langcell a { 
        color: black;
        text-decoration: none;
    }
    .langcell:hover {
        top: -16pt;
    }
    .langcell p {
        font-size: 14pt;
        font-weight: bold;
        text-transform: uppercase;
        font-family: Verdana, Geneva, sans-serif;
        letter-spacing: 0.05em;
        opacity: 0;
        -webkit-transition: opacity 0.25s;
        -moz-transition: opacity 0.25s;
        -o-transition: opacity 0.25s;
        transition: opacity 0.25s;
    }
    .langcell:hover p {
        opacity: 1;
    }
    .langcell img {
        opacity: 0.65;
        -webkit-transition: opacity 0.25s;
        -moz-transition: opacity 0.25s;
        -o-transition: opacity 0.25s;
        transition: opacity 0.25s;
    }
    langcell:hover img {
       opacity: 1;
    }

Answer 2

CSS3很新。许多浏览器中的许多功能仍然不兼容。 Compatibility Chart

所以如果你的客户有一些旧的浏览器（即使他们有一个旧版本），这有点令人反感，在这种情况下CSS3过渡不会工作。

进行转换最安全的选择是使用javascript或某些javascript库（如jQuery）进行转换

CSS悬停过渡跨浏览器兼容性

2 个答案: