10

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

它应该如何表现如下:

  1. 用户将鼠标悬停在两个(或更多)语言选择器之一上。
  2. 该语言选择器向上过渡并完全不透明。相关的语言文本(例如,英语、西班牙语)也会出现。
  3. 用户要么单击链接,要么将鼠标移出,在这种情况下,转换反转。

在 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;
}
4

2 回答 2

6

我在 firefox(v12) 上也遇到了奇怪的问题,它在悬停时将两个元素向上移动。后来的版本(19v),似乎解决了。

我认为您的选择器以及 Mozilla 如何解释事物与 webkit 之间存在一些问题。看看这个jsfiddle是否适合你。

我真正做的只是改变了很多 to 的选择器,a.langcell似乎工作。我不得不重新调整一点 css 来实现相同的样式,比如嵌套.langcell a选择器。我怀疑这可能是由于a默认情况下是内联的,而p它是块并且img是内联块。

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

CSS 选择器性能

代码:

    .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;
    }
于 2013-03-15T07:30:10.103 回答
1

CSS3 是相当新的。并且许多功能在许多浏览器中仍然不兼容。兼容性图表

因此,如果您的客户使用的是旧版浏览器(即使他们有一年旧的版本),这有点令人反感,在这种情况下 CSS3 转换将无法正常工作。

进行转换最安全的选择是使用 javascript 或一些 javascript 库(例如 jQuery)来完成

于 2013-03-15T07:38:43.703 回答