Question

I have a navigation bar with images, like so:

<ul>
  <li class="me">
    <span class="cont"><img src="dummy.png" /></span>
  </li>
  <li class="me">
    <span class="cont"><img src="dummy.png" /></span>
  </li>
</ul>

On hovering over a list item I want to change the background color to cover the span and image like so:

.me {background-color: none;}
.me:hover {background-color: rgba(150,150,150,0.5);}

Problem is, the image does not get covered… Is this because the background is in fact… a “background” on which child elements are sitting? If so, how could I achieve this effect with plain CSS?

EDIT – solution

this worked with my original HTML structure:

<ul>
  <li>
   <a href="" class="ui-btn">
     <span class="ui-btn-inner"> /* CONTAINS IMAGE AS BACKGROUND */
        <span class="ui-btn-text">text</span>  /* GETS BACKGROUND */
        <span class="ui-icon"></span>
     </span>
   </a>
 </li>
</ul>

“Negative logic”: If I assign the background to list item, it sits behind all child elements, so I figured I needed to assign the background to an element that is a child of the element containing the img to have it appear above all items. span ui-btn-inner contains the image, so setting the :hover background on span ui-btn-text makes it appear above the image… weird, but works.

Answer 1

Yes, it’s because the background is in fact a background. The best method to achieve this in raw css would be to continue using the background:

.me
{
    background-color: none;
    background-image: url(dummy.png);
    background-repeat: no-repeat;
}
.me:hover
{
    background-color: rgba(150,150,150,0.5);
    background-image: ;
}

You could also achieve this effect with a bit of javascript as well.

<ul>
  <li class="me">
    <span class="cont"><img="dummy.png" onmouseover='this.src="sometransparent.gif";' onmouseout='this.src="dummy.png";'></span>
  </li>
  <li class="me">
    <span class="cont"><img="dummy.png"" onmouseover='this.src="sometransparent.gif";' onmouseout='this.src="dummy.png";></span>
  </li>
</ul>

Code not tested. It might require tweaking to get it just right.

Edit: Layering concept
None of this pseudo-code is test, but I’ve done it before so it may just take a bit of tweaking. I don’t have a copy of the original I did on hand so I’ll have to wing it. The first step is to create a relative container and 2 sub containers.

.meContainer
{
    position: relative;
    width: 100px;
    height: 30px;   /* I usually specify height/width for these things */
}

.meContainerLink
{
    position: absolute;
    top: 0;
    left: 0;        /* You need to use position to get them to overlap */
    z-index: 1;     /* Provide a layer */
}

.meContainerAlpha
{
    position: absolute;
    top: -30px;     /* Move it UP 30px */
    left: 0px;
    z-index: 2;     /* Place it on top of the other layer */
    display: none;  /* Hide it */
    background-color: rgba(150,150,150,0.5);   
}

.meContainerAlpha:hover
{
    display: inline; /* Show it */
}

Then you’d need to place these in divs inside your <li>.

<ul>
  <li class="me">
    <div class="meContainer">
        <div class="meContainerLink">
            <img="dummy.png">
        </div>
        <div class="meContainerAlpha">
            &nbsp;
        </div>
    </div>
  </li>
  <li class="me">
    <div class="meContainer">
        <div class="meContainerLink">
            <img="dummy.png">
        </div>
        <div class="meContainerAlpha">
            &nbsp;
        </div>
    </div>
  </li>
</ul>

I don’t recall ever trying this method inside embedded <li> tags, so it may behave oddly at first. You may have to abandon <li> and switch to a different <div> structure entirely.