CSS Hover BreadCrumbs after and before don't change colour -
can't simple code work css. code working fine on jsp page can't hovers turn on colors of :before , :after.
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; }
while giving :hover effect on pseudo element should :hover:before.
in example i've made :hover effect. have @ 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; } 
Comments
Post a Comment