Question

我一直在努力为我的按钮设置特殊的悬停效果，但问题是，它不适用于Firefox，但它可以顺利运行。

#hotsheet_wrapper .hs_sellers{
    background:url('images/hs_sl_bg.png') center top no-repeat;
}

#hotsheet_wrapper .hs_buyers{
    background:url('images/hs_sl_bg.png') center top no-repeat;
}

#hotsheet_wrapper .hs_senior{
    background:url('images/hs_sl_bg.png') center top no-repeat;
}

#hotsheet_wrapper .hs_divorce{
    background:url('images/hs_dl_bg.png') center top no-repeat;
}

#hotsheet_wrapper .hs_construction{
    background:url('images/hs_dl_bg.png') center top no-repeat;
}

#hotsheet_wrapper .hs_sellers:hover{
    background:url('images/hs_sellers.png') center top no-repeat;
    transition: 1s all ease;
    -moz-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    -ms-transition: 1s all ease;
}

#hotsheet_wrapper .hs_buyers:hover{
    background:url('images/hs_buyers.png') center top no-repeat;
    transition: 1s all ease;
    -moz-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    -ms-transition: 1s all ease;
}

#hotsheet_wrapper .hs_senior:hover{
    background:url('images/hs_senior.png') center top no-repeat;
    transition: 1s all ease;
    -moz-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    -ms-transition: 1s all ease;
}

#hotsheet_wrapper .hs_divorce:hover{
    background:url('images/hs_divorce.png') center top no-repeat;
    transition: 1s all ease;
    -moz-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    -ms-transition: 1s all ease;
}

#hotsheet_wrapper .hs_construction:hover{
    background:url('images/hs_construction.png') center top no-repeat;
    transition: 1s all ease;
    -moz-transition: 1s all ease;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    -ms-transition: 1s all ease;
}

Answer 1

看起来这是一个错误 - https://bugzilla.mozilla.org/show_bug.cgi?id=546052

但是，您可以使用CSS opacity或JS / jQuery来获得类似的效果。查看以下纯CSS解决方案。

.element {
    position: relative;
    width: 200px;
    height: 300px;
}
.element:before,
.element:after {
    background-repeat: no-repeat;
    content:"";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
}
.element:before {
    background-image: url(https://picsum.photos/200/300?image=0);
    transition: opacity 1s;
    z-index: 1;
}
.element:after {
    background-image: url(https://picsum.photos/200/300?image=1);
}
.element:hover:before {
    opacity: 0;
}

<div class="element"></div>

CSS Transition无法在Firefox中运行

1 个答案: