gpt4 book ai didi

CSS Hover BreadCrumbs 前后不改变颜色

转载 作者:行者123 更新时间:2023-11-28 09:42:16 26 4
gpt4 key购买 nike

无法让这个简单的代码与 css 一起工作。此代码在我的 JSP 页面上运行良好,但我无法让悬停打开 :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;
}

最佳答案

pseudo 元素上赋予 :hover 效果时,它应该类似于 :hover:before

在这个例子中我制作了一个:hover效果。看看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;
}

关于CSS Hover BreadCrumbs 前后不改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25368700/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com