使用不同浏览器时出现悬停效果问题

时间：2018-04-19 12:28:33

标签： html css firefox hover

我有一些简单的网站，我创建了一些悬停效果，在Crome我用来开发网站工作完美如何我想要它但火狐的悬停效果都发生了变化。这可能是什么原因？

我提供了一个指向codepen的链接供您参考：https://codepen.io/underlight/pen/LmEjBW 

body {
    margin: 0;
    padding: 0;
    font-family: "Black Han Sans";
    background-color: #f2f2f2;
    color: #f2f2f2;
    text-transform: uppercase;
    font-size: 26px;
}
.navigation {
    color: #4cb1e6;
    font-family: "Black Han Sans";
}
p {
    font-size: 40%;
    text-align: center;
    margin-top: 5px;
}
a {
    cursor: pointer;
}
.crane {
    width: 40px;
    margin: 0 auto;
}
ul {
    padding: 0;
}
ul li{
    list-style-type: none;
    margin: 0 auto;
    margin-top: 10px;
    border: solid 2px #4cb1e6;
    border-radius: 15px;
    width: 150px;
    text-align: center;
}
.bg {
    height: 100vh;
}
.wrapper {
    width: 300px;
    overflow: hidden;
    margin: 0 auto;
    -webkit-transform: translate(0%);
    -moz-transform: translate(0%);
    transform: translate(0%);
}
.wrapper:nth-of-type(3) {
    margin-bottom: 30px;
}
.box {
    background-color: #222;
    cursor: pointer;
}
.box img{
    width: 100%;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
}
.box:hover img  {
    -webkit-transform: scale(1.05) rotate(2deg);
    -moz-transform: scale(1.05) rotate(2deg);
    transform: scale(1.05) rotate(2deg);
    opacity: .7;
}
span:nth-of-type(1) {
    position: absolute;
    z-index: 1;
    top: 0;
    height: 3px;
    width: 100%;
    background-color: #4cb1e6;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    -webkit-transform: translate(-100%);
    -moz-transform: translate(-100%);
    transform: translate(-100%)
}
span:nth-of-type(2) {
    position: absolute;
    z-index: 1;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: #4cb1e6;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    transition-delay: .2s;
    -webkit-transform: translate(100%);
    -moz-transform: translate(100%);
    transform: translate(100%)
}
.box:hover span:nth-of-type(1), .box:hover span:nth-of-type(2) {
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    transform: translate(0);
}
span:nth-of-type(3), span:nth-of-type(4) {
    position: absolute;
    width: 0%;
    height: 40px;
    top: 50%;
    right: 50%;
    -webkit-transform: translate(-0%, -50%);
    -moz-transform: translate(-0%, -50%);
    transform: translate(-0%, -50%);
    background-color: #4cb1e6; 
    -webkit-transition: 1s; 
    -moz-transition: 1s; 
    transition: 1s;
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    transition-delay: .2s;
    opacity: .7;
}
.box:hover span:nth-of-type(3), .box:hover span:nth-of-type(4) {
    width: 25%;
}
span:nth-of-type(4) {
    left: 50%;
}
.box h3 {
    position: absolute;
    opacity: .7;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
    color: #4cb1e6;
    text-align: center;
    margin: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: 70%;
}
.box:hover h3 {
    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    transition-delay: .3s;
    opacity: 1;
    color: #fefefe;
}
@media (max-width: 740px) {
    .wrapper {
        width: 100%;
    }
    .box img {
        height: 50%;
    }
}
<body>
    <nav class="navigation">
        <div>
            <p>Created By <a href="#" target="_blank">UnderLight Studio</a></p>
            <ul>
                <li><img class="crane" src="img/crane.svg">STACKER</li>
            </ul>
        </div>
    </nav>
    <section class="bg">
        <div class="wrapper">
            <div class="box">
                <a href="https://www.transnetportterminals.net/Ports/Stack%20Dates/DURBAN%20CONTAINER%20TERMINAL%20PIER%201.pdf" target="_blank"><img src="https://images.pexels.com/photos/326410/pexels-photo-326410.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <h3>Durban-pier1</h3></a>
            </div>
        </div>
        <div class="wrapper">
            <div class="box">
                <a href="https://www.transnetportterminals.net/Ports/Stack%20Dates/DURBAN%20CONTAINER%20TERMINAL%20PIER%202.pdf" target="_blank"><img src="https://images.pexels.com/photos/799091/pexels-photo-799091.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <h3>Durban-pier2</h3></a>
            </div>
        </div>
        <div class="wrapper">
            <div class="box">
                <a href="https://www.transnetportterminals.net/Ports/Stack%20Dates/CAPE%20TOWN%20CONTAINER%20TERMINAL.pdf" target="_blank"><img src="https://images.pexels.com/photos/259447/pexels-photo-259447.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <h3>Cape Town</h3></a>
            </div>
        </div> 
    </section>
</body>

谢谢！

2 个答案:

答案 0 :(得分：0)

非常有用的CodePen实现 - 谢谢，也非常有趣。

我简要介绍了您的codepen项目。在这种程度上，我可以看到问题以及如何解决这个问题。然而，也许其他人可以添加更多深度和见解，为什么会发生这种情况。明显的问题是firefox和chrome解释和使用css动画的方式似乎有所不同，虽然应该有一个标准在所有/大多数浏览器上工作，但事实并非如此。

您可以尝试我的以下解决方案，这使我能够在chrome和firefox中正确使用codepen（希望这有帮助）。

分开

.box:hover span:nth-of-type(1), .box:hover span:nth-of-type(2)

分为两类：

.box：hover span：nth-​​of-type（1）：

-webkit-transform: translate(0);
-moz-transform: translate(-100%) !important;
transform: translate(-100%);

.box：hover span：nth-​​of-type（2）：

-webkit-transform: translate(0);
-moz-transform: translate(0) !important;
transform: translate(-100%);

我还修改了以下两个类：

span:nth-of-type(1) {
   position: absolute;
   z-index: 1;
   top: 0;
   height: 3px;
   width: 100%;
   background-color: #4cb1e6;
   -webkit-transition: 1s;
   -moz-transition: 1s;
   transition: 1s;
   -webkit-transform: translate(-100%);
   -moz-transform: translate(0) !important;
   transform: translate(-100%);
}

span:nth-of-type(2) {
   position: absolute;
   z-index: 1;
   bottom: 0;
   height: 3px;
   width: 100%;
   background-color: #4cb1e6;
   -webkit-transition: 1s;
   -moz-transition: 1s;
   transition: 1s;
       transition-delay: 0s;
   -webkit-transition-delay: .2s;
   -moz-transition-delay: .2s;
   transition-delay: .2s;
   -webkit-transform: translate(100%);
   -moz-transform: translate(100%) !important;
   transform: translate(100%);
}

你会注意到已经给出了两个-moz变换属性

  

！重要

这意味着在firefox中启动时，这些属性将用于默认的transform属性。这也允许同一个类在chrome和firefox中使用不同的值来实现相同的效果。

害怕我对firefox css解释的了解以及它与chrome相比如何处理css是非常少的，希望其他人可以回复你，或者你可能希望google它并自己了解更多信息。

答案 1 :(得分：0)

expeted result, eg.. : borderRadius:0px,fontSize:8px -> border-radius:0px,font-size:8px
相关问题
最新问题