2

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

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

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

我认为悬停不会发生由于跨度...

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

4

3 回答 3

0

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

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

看到这个jsfiddle

于 2012-12-26T14:52:17.713 回答
0

看起来您正在尝试更改跨度的背景图像，而不是图像标签的 src。

为了做到这一点，使用 jQuery 可能会更好。

于 2012-12-26T14:42:32.713 回答
0

我建议将:hover伪类应用于锚 ( a.mega:hover)，然后更改其<span>下方的子项。

.ja-megamenu ul.level0 li.mega a.mega:hover span.has-image {
    /* background change */
}

请记住，只要跨度内有一个孩子<img>，它就会与您在跨度上设置的背景重叠。也就是说span的背景<img src="...">在视觉上永远无法超越。

于 2012-12-26T14:41:44.710 回答