Question

Hello Friends When i Inspect element my Code is so far …

<div class="ja-megamenu " id="ja-megamenu">
    <ul class="megamenu level0">
        <li  class="mega first active">
            <a href="http://127.0.0.1/"  class="mega first active" id="menu435" >
                <span class="has-image" >
                    <img src=images/on_home.png>
                </span>
            </a>
        </li>
       <li  class="mega haschild">
            <a href="/index.php?option=com_community&amp;view=frontpage&amp;Itemid=455"  class="mega haschild" id="menu455" title="Grower Community">
                <span class="has-image" >
                    <img src=images/active_11.png>
                </span>
            </a>
            <div class="childcontent cols1 ">
                <div class="childcontent-inner-wrap">
                    <div class="childcontent-inner clearfix" style="width: 200px;">
                        <div class="megacol column1 first" style="width: 200px;">
                            <ul class="megamenu level1">
                                <li  class="mega first">
                                    <div class="group">
                                        <div class="group-title">
                                            <a href="/index.php?option=com_community&amp;view=photos&amp;Itemid=507" class="mega first" id="menu507" title="Photos">
                                                <span class="has-image" >
                                                    <img src=images/wt_under_link_01_01.png>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="mega last">
                                    <a href="/index.php?option=com_allvideoshare&amp;view=category&amp;slg=0&amp;orderby=default&amp;Itemid=934"  class="mega last" id="menu934" title="Videos">
                                        <span class="has-image" >
                                            <img src=images/wt_under_link_01_02.png>    
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li  class="mega">
            <a href="/index.php?option=com_kunena&amp;view=topics&amp;mode=replies&amp;Itemid=506"  class="mega" id="menu506" title="Forum">
                <span class="has-image" >
                    <img src=images/active_05.png>
                </span>
            </a>
        </li>
        <li  class="mega last">
            <a href="/index.php?option=com_easyblog&amp;view=blogger&amp;limit=-2&amp;Itemid=944" class="mega last" id="menu944" title="Blog">
                <span class="has-image" >
                    <img src=images/active_07.png>
                </span>
            </a>        
        </li>
    </ul>
</div>

Now here I want to change the image on hover …

I am using somehing like this

.ja-megamenu ul.level0 li.mega a.mega span.has-image:hover{
    background:url(../../images/act_05.png) no-repeat 0 0;
}

but the image hover is not occurs … can any one please help me

I think hover is not happens due to span …

please suggest me what i can do here ?

Answer 1

As it’s been said already, the background image will not display as long as you have an image over it, so you could use this to hide the image when hovering the span:

.ja-megamenu ul.level0 li.mega a.mega span.has-image:hover > img {
    visibility:hidden;
}

See this jsfiddle