CSS Hover BreadCrumbs之前和之后不改变颜色

Can't get this simple code to work with css. This code is working fine on my JSP page but I can't get the hovers to turn on the colors of :before and :after.

无法使用这个简单的代码来使用css。这段代码在我的JSP页面上工作得很好,但是我无法使用hovers打开颜色:before和:after。

Demo

HTML

<div class="wizard">
   <a class="inicio"><span></span>Anterior</a>
   <a class="badge">
   <span>
   <h:outputText value="#{EController.form.mes} - #{EController.form.ano}" styleClass="tituloMes" style="border-bottom-style: none; border-bottom-width: 0px; height: 14px; font-size: 12pt;vertical-align:initial;">   </h:outputText>
   </span>
   </a>
   <a class="fim"><span></span>Próximo</a>
</div>

CSS

.wizard .badge {
    padding: 10px 12px 10px;
    margin-right: 5px;
    background: #efefef;
    position: relative;
    display: inline-block;
}
.wizard .badge:before {
    width: 0;
    height: 0;
    border-top: 20 solid #FFF;
    border-bottom: 20 inset #FFFFFF;
    border-right: 20 solid #efefef;
    position: absolute;
    content:"";
    top: 0;
    left: 0;
}
.wizard .badge:after {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #efefef;
    position: absolute;
    content:"";
    top: 0;
    right: -20px;
    z-index: 2;
}
.wizard .fim {
    padding: 10px 0px 5px 0px;
    margin-right: 5px;
    background: #007ACC;
    position: relative;
    display: inline-block;
    width: 100px;
    height: 25px;
    color: white;
    font-family: sans-serif;
}
.wizard .fim:before {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid white;
    position: absolute;
    content:"";
    top: 0;
    left: 0;
}
.wizard .fim:after {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #007ACC;
    position: absolute;
    content:"";
    top: 0;
    right: -20px;
    z-index: 2;
}
.wizard .inicio {
    padding: 10px 12px 10px;
    margin-right: 5px;
    background: #007ACC;
    position: relative;
    display: inline-block;
    width: 75px;
    height: 20px;
    color: white;
    font-family: sans-serif;
}
.wizard .inicio:before {
    width: 0;
    height: 0;
    border-top: 20px solid #FFF;
    border-bottom: 20px inset #FFFFFF;
    border-right: 20px solid #007ACC;
    position: absolute;
    content:"";
    top: 0;
    left: 0;
}
.wizard .inicio:after {
    width: 0;
    height: 0;
    border-top: 20px solid #007ACC;
    border-bottom: 20px inset #007ACC;
    border-right: 20px solid transparent;
    position: absolute;
    content:"";
    top: 0;
    right: -20px;
    z-index: 2;
}
.wizard .inicio:hover {
    background: rgb(86, 180, 243);
    color: #FFF;
}
.wizard .fim:hover {
    background: rgb(86, 180, 243);
    color: #FFF;
}
.wizard .fim:before:hover {
    background: rgb(86, 180, 243);
    color: #FFF;
}
.wizard .fim:after:hover {
    background: rgb(86, 180, 243);
    color: #FFF;
}
.wizard .inicio:before:hover {
    width: 0;
    height: 0;
    border-top: 20px solid #FFF;
    border-bottom: 20px inset #FFFFFF;
    border-right: 20px solid #rgb(86, 180, 243);
    position: absolute;
    content:"";
    top: 0;
    left: 0;
}
.tituloMes {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
    color: #0073b9;
    /** margin-left: 10px; **/
    padding-left: 10px;
    padding-right: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    height: 20px;
    vertical-align:top;
}

2 个解决方案

#1

while giving :hover effect on pseudo element it should be like :hover:before.

同时给出:悬停对伪元素的影响应该是:hover:before。

In this example I've made a :hover effect. Have a look at DEMO.

在这个例子中,我做了一个:悬停效果。看看DEMO。

.wizard .inicio:hover{
    background: rgb(86, 180, 243);
    color: #FFF;
}
.wizard .inicio:hover:before{
    border-top: 20px solid #FFF;
    border-bottom: 20px inset #FFFFFF;
    border-right: 20px solid rgb(86, 180, 243);
    color: #FFF;
}
.wizard .inicio:hover:after{
    border-top: 20px solid rgb(86, 180, 243);
    border-bottom: 20px inset rgb(86, 180, 243);
    border-right: 20px solid transparent;
    color: #FFF;
}

#2

As has been noted already, you need to change your pseudo element hover states with :hover:before. As your example was missing hover states, I have gone a step further and cleaned everything up to get a complete solution.

如前所述,您需要使用以下命令更改伪元素悬停状态:hover:before。由于您的示例缺少悬停状态,我已经更进一步清理所有内容以获得完整的解决方案。

All pseudo elements are positioned outside of their parents so they can have a transparent border that will work on any background image or colour.

所有伪元素都位于其父元素之外,因此它们可以具有可用于任何背景图像或颜色的透明边框。

Here is a complete example!

这是一个完整的例子!

HTML

<div class="wizard">
    <a class="inicio">test1</a>
    <a class="badge">Badge can be super long</a>
    <a class="fim">test2</a>
</div>

CSS

.wizard {
display:table;
margin:0 auto;
}

.wizard .badge {
background:#efefef;
position:relative;
display:inline-block;
text-align:center;
margin:0 30px;
padding:10px 12px;
}

.wizard .badge:after {
width:0;
height:0;
border-top:20px inset transparent;
border-bottom:20px inset transparent;
border-left:20px solid #efefef;
position:absolute;
content:"";
top:0;
right:-20px;
}

.wizard .badge:before {
width:0;
height:0;
border-top:20px inset transparent;
border-bottom:20px inset transparent;
border-right:20px solid #efefef;
position:absolute;
content:"";
top:0;
left:-20px;
}

.wizard .fim {
background:#007ACC;
position:relative;
display:inline-block;
width:85px;
height:25px;
color:#FFF;
font-family:sans-serif;
text-align:right;
padding:10px 0 5px;
}

.wizard .fim:after {
width:0;
height:0;
border-top:20px inset transparent;
border-bottom:20px inset transparent;
border-left:20px solid #007ACC;
position:absolute;
content:"";
top:0;
right:-20px;
}

.wizard .fim:before {
width:0;
height:0;
border-top:20px solid #007ACC;
border-bottom:20px inset #007ACC;
border-left:20px solid transparent;
position:absolute;
content:"";
top:0;
left:-20px;
}

.wizard .fim:hover:after {
border-top:20px solid transparent;
border-bottom:20px inset transparent;
border-left:20px solid #56b4f3;
}

.wizard .fim:hover:before {
border-top:20px solid #56b4f3;
border-bottom:20px inset #56b4f3;
border-left:20px solid transparent;
}

.wizard .inicio {
background:#007ACC;
position:relative;
display:inline-block;
width:65px;
height:20px;
color:#FFF;
font-family:sans-serif;
padding:10px 12px 10px 0;
}

.wizard .inicio:after {
width:0;
height:0;
border-top:20px solid #007ACC;
border-bottom:20px inset #007ACC;
border-right:20px solid transparent;
position:absolute;
content:"";
top:0;
right:-20px;
}

.wizard .inicio:before {
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px inset transparent;
border-right:20px solid #007ACC;
position:absolute;
content:"";
top:0;
left:-20px;
}

.wizard .inicio:hover,.wizard .fim:hover {
background:#56b4f3;
color:#FFF;
}

.wizard .inicio:hover:after {
border-top:20px solid #56b4f3;
border-bottom:20px inset #56b4f3;
border-right:20px solid transparent;
}

.wizard .inicio:hover:before {
border-top:20px solid transparent;
border-bottom:20px inset transparent;
border-right:20px solid #56b4f3;
}