Question

希望有人有时间帮助我解决一些混乱问题？

当孩子徘徊时，我试图让元素背景的父元素发生变化，然后当孩子的鼠标悬停结束时再返回默认值。

我目前遇到的问题是我的脚本我无法从* .css文件中获取代码将背景颜色恢复为默认值，当hove ris丢失时，父项背景仍然是它更改的颜色。

Jquery ::

$(document).ready(function() {
    $('ul.sf-menu li li li').hover(function() {
         var currentID = "#";
         currentID += $(this).parent().parent().attr('id');

         $('ul.sf-menu li li ul').parent(currentID).css('background', 'pink');
         $('ul.sf-menu li li li').focusout().css('background', '#00467F');
    });
});

HTML ::

<ul class="sf-menu">
    <li id='education'><a>Education</a>
        <ul>
            <li class='education' id='6'><a href='#' title='Desktops'>Desktops</a>
                <ul>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                </ul>
            </li>

            <li class='education' id='9'><a href='#' title='#'>#</a>
                <ul>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                </ul>
            </li>

            <li class='education' id='11'><a href='#' title='#'>#</a>
                <ul>
                    <li class='education2'><a href='#' title='#'>#</a></li>
                </ul>
            </li>

            <li class='education' id='14'><a href='#' title='#'>#</a>
                <ul>
                     <li class='education2'><a href='#' title='#'>#</a></li>
                     <li class='education2'><a href='#' title='#'>#</a></li>
                     <li class='education2'><a href='#' title='#'>#</a></li>
                     <li class='education2'><a href='#' title='#'>#</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

提前感谢任何可以为我解决这个问题的人。

Answer 1

使用此处建议的jQuery语法，因为它具有In和Out处理程序：

http://api.jquery.com/hover/#hover1

.hover( handlerIn(eventObject), handlerOut(eventObject) )

Answer 2

正如我在评论中所说，你应该使用jQuery提供的power of hover。此外，您也不需要使选择器变得复杂。再一次，利用jQuery的强大功能在DOM中移动，你可以select the parent几乎不费力（在文档中甚至有一个很好的例子）。这是example here（我相信）是你想要做的。如果没有，请告诉我，我会修复它/更新它。

让您理解代码：

$(function() {
    $('li').hover(function() {
        $(this).parent().css('background-color', 'pink');
    }, function() {
        $(this).parent().css('background-color', 'white');
    });
});

根据正在悬停的列表项，定义了两个函数。第一个是用于mouseenter，第二个是用于mouseleave。基本上，您只需要告诉DOM如何基于这些功能之一进行更新。在此之后，只要您将鼠标悬停在li上，其父级就会以您希望的颜色突出显示。

Answer 3

使用带有两个参数的jQuery hover，第一个将被称为monmousemove，第二个将被称为onmouseout。使用第一个来设置你的CSS，用第二个来清除/重置css。
要将css重置为其样式表值，请设置为''。

点击此处：http://jsfiddle.net/SF3Tz/

制作嵌套链接系统会在其他</li> <li> </li>的情况下更改<li> bg

3 个答案: