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 !
here's the sample code on jsfiddle : http://jsfiddle.net/msU6p/4/
here's the 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
does anyone know where's my mistake or what can I possibly do to make this work only using css ?
Thanks in Advance
display:block; position:relative; for <span> can help to you. DEMO
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments