图像丢失::后伪元素

Question

我有一个按钮与悬停效果。

当我应用悬停类时，图像（向下箭头）丢失。如果我删除悬停类，然后我可以看到图像。

HTML代码与悬停类

<button type="submit" class="button uppercase btn-1b">home</button> 

没有悬停类

<button type="submit" class="button uppercase">home</button> 

Demo

HTML代码 - 随着图像但没有悬停效果

Demo - 以悬停效果但缺少图像。

任何帮助，高度赞赏。提前致谢。

Answer 1

可以在.btn-1b:after在.button::before伪元素和过渡背景定义箭头图片：

.button::before { 
 
    background-image: url("http://s12.postimg.org/63ise2fkp/button_arrow.png?noCache=1431762044"); 
 
    background-repeat: no-repeat; 
 
    content: ""; 
 
    height: 5px; 
 
    position: absolute; 
 
    right: 4.1rem; 
 
    top: 1.1rem; 
 
    width: 8px; 
 
} 
 
.uppercase { 
 
    text-transform: uppercase; 
 
} 
 
.button { 
 
    color: white; 
 
    position: relative; 
 
    z-index: 1; 
 
    background: #000; 
 
    border: 1px solid #9d9368; 
 
    font-size: 17px; 
 
    padding: 0.5rem 2rem; 
 
    width: 220px; 
 
    display: inline-block; 
 
    cursor:pointer; 
 
} 
 
.btn-1b:after { 
 
    content: ''; 
 
    position: absolute; 
 
    transition: all 0.3s ease 0s; 
 
    width: 100%; 
 
    height: 0; 
 
    top: 0; 
 
    left: 0; 
 
    background: #ffffff; 
 
    z-index: -1; 
 
} 
 
.btn-1b:hover, .btn-1b:active { 
 
    color: #0e83cd; 
 
} 
 
.btn-1b:hover:after, .btn-1b:active:after { 
 
    height: 100%; 
 
}

<button type="submit" class="button uppercase btn-1b">home</button>