所以我创建了一个div作为父元素,里面有一个span元素,持有父元素的标题,我在父元素的伪元素(:before)之前定义了一个css,所以当用户将鼠标悬停在元素上时,它有一个很好的过渡
但问题是:在覆盖span元素之前,标题被隐藏,当然是不可接受的!
这是HTML:
和风格:
.menuItem_Large
{
position: absolute;
left: 0px;
display: inline-block;
padding-left: 6px;
padding-right: 6px;
height: 20px;
line-height: 16px;
vertical-align: middle;
background-image : url('http://i58.tinypic.com/21eyrk8.png');
background-repeat: repeat;
cursor:pointer;
}
.menuItem_Large:before
{
content:"";
position:absolute;
top:0px;
left:0px;
width:0%;
height:20px;
background-color:rgba(0,200,255,1);
transition:width 0.3s ease-out;
}
.menuItem_Large:hover:before
{
width:100%;
}
.menuItem_Large span
{
color: white;
font-size: 16px;
}
>请注意:
我尝试在span上使用z-index将其设置为2左右,但它不起作用,当我将前面元素的z-index设置为负时,它在父元素的背景图像下面,这是不好的
有谁知道我的错误在哪里或我可以做什么才能使这个工作只使用CSS?
提前致谢