html - 如何在 CSS 中更改悬停图像

Question

你好 friend 当我检查元素我的代码到目前为止...

<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>

现在我想在悬停时更改图像 ...

我正在使用这样的东西

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

但是图像悬停没有发生......任何人都可以帮助我

我认为悬停不会因跨度而发生......

请建议我在这里可以做什么？

Answer 1

正如已经说过的那样，只要您有图像覆盖，背景图像就不会显示，因此您可以在悬停 span 时使用它来隐藏图像:

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

查看此 jsfiddle