[英]before pseudo-element covering inner content
so I have created a div
as the parent with a span
element inside, holding the title for the parent and I have defined a css
before pseudo-element ( :before
) for the parent so when user hovers over the element it has a nice transition but the problem is : the :before
covers the span
element so the title gets hidden which is not acceptable of course ! 所以我创建了一个div
作为父元素,里面有一个span
元素,持有父元素的标题,我在父元素的伪元素( :before
)之前定义了一个css
,所以当用户将鼠标悬停在元素上时,它有一个很好的过渡但问题是: :before
覆盖span
元素:before
,标题被隐藏,当然是不可接受的!
here's the sample code on jsfiddle : http://jsfiddle.net/msU6p/4/ 这是jsfiddle上的示例代码: http : //jsfiddle.net/msU6p/4/
here's the HTML : 这是HTML:
<div class="menuItem_Large" id="node_1_menu">
<span>menu item 1</span>
</div>
and styles : 和风格:
.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;
}
I tried using z-index
on span setting it to 2 or so but It doesn't work and when I set z-index
of before
element to negative It goes under the parent's background-image
which is not good 我尝试在span上使用z-index
将其设置为2左右,但它不起作用,当我将before
元素的z-index
设置为负时,它在父元素的background-image
,这是不好的
does anyone know where's my mistake or what can I possibly do to make this work only using css
? 有谁知道我的错误在哪里或我可以做什么才能使这个工作只使用css
?
Thanks in Advance 提前致谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.