How to Change the hover image in CSS - html

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&view=frontpage&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&view=photos&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&view=category&slg=0&orderby=default&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&view=topics&mode=replies&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&view=blogger&limit=-2&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

Answer 2

I would recommend applying the :hover pseudo-class to the anchor (a.mega:hover) then changing the child <span> beneath it.
.ja-megamenu ul.level0 li.mega a.mega:hover span.has-image {
/* background change */
}
Keep in mind that as long as there is a child <img> within the span, that's going to overlap whatever you have set a background on the span. That is to say the span's background will never overcome the <img src="..."> in terms of visuals.

Answer 3

It looks like you are trying to change the background image of the span and not the src of the image tag.
In order to do that you would probably have better luck with using jQuery.