How to Change the hover image in CSS


Tags: html,css,css3

Problem :

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 ?



Solution :

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


    CSS Howto..

    How to create a dotted shadowy effect on an image with CSS?

    HOW to combine two element that has different parent in CSS? [duplicate]

    Show child elements into parent by changing its class through jquery

    How to design a Sass animation library that allows users to modify variables?

    How to output CSS counter from Sass mixin

    How to change order of table td for responsive?

    How to add a border-bottom similar to Yahoo! when you scroll the page?

    How to move images in a grid box?

    How do I add a the bootstrap 'form-control' class to a select using the Simple_Form gem?

    HTML Tables - how can I make all cells other than the last always be wide enough?

    How to remove dropdown active color in bootstrap 3.0?

    how to reposition label which sits on top of the checkbox

    How to set css attribute for pseudo element in Dart

    How to set the height with css to 100% and make it fluid?

    How to do a darker background image in css3 and stretch it?

    How do I programmatically change the CSS link for HTML files in C#?

    How do I vertically center an img in a div?

    How to use nested p tags in CSS and Bootstrap boxes?

    Using CSS3 how to animate the multiple `background-image` for different view ports

    How to override inline style dynamically?

    CSS and HTML: How to create an Expanding DIV On Click?

    Css how to replace block after click button

    How do you make speech bubble with Tooltipsy?

    how to align image and text when floating to image

    How to ignore comments in sass partial files?

    How can I make this work?

    How to give a css code for combined classes in HTML [duplicate]

    How to hide `
  • ` drop down menu in Nav bar in Desktop view?
  • Changing a DIV to “position:fixed” then change it back to “static” and show the rest of DIVs

    How to find resources(CSS , JS Etc) that are blocking in Chrome