CSS、jQuery和导航控件-需要做一些小调整_Jquery_Css

CSS、jQuery和导航控件-需要做一些小调整

jquery css

CSS、jQuery和导航控件-需要做一些小调整,jquery,css,Jquery,Css,我有一个导航，它使用jQuery和CSS来控制图像鼠标的位置和下拉菜单。一切正常。我有一个客户的要求，虽然作出一个修改您可以在这里看到示例：（现在最好在Firefox或Safari中查看）如果将鼠标悬停在链接上，金色变为绿色，但是如果将鼠标悬停在下拉菜单项上，父链接将变回金色。我的客户希望父链接保持绿色。所以我的问题是，我如何做到这一点以下是父链接鼠标悬停的css： ul.dropdown li a.home:hover, ul.dropdown li a.about:hover, ul.

我有一个导航，它使用jQuery和CSS来控制图像鼠标的位置和下拉菜单。一切正常。我有一个客户的要求，虽然作出一个修改

您可以在这里看到示例：（现在最好在Firefox或Safari中查看）

如果将鼠标悬停在链接上，金色变为绿色，但是如果将鼠标悬停在下拉菜单项上，父链接将变回金色。我的客户希望父链接保持绿色。所以我的问题是，我如何做到这一点

以下是父链接鼠标悬停的css：

ul.dropdown li a.home:hover,
ul.dropdown li a.about:hover,
ul.dropdown li a.portfolio:hover,
ul.dropdown li a.maintenance:hover,
ul.dropdown li a.testimonials:hover,
ul.dropdown li a.contact:hover    { background-position: center center; }

以下是导航代码：

        <ul class="dropdown">
    <li><a class="home" href="#">Home</a></li>
        <li><a class="about" href="#">About Us</a>
            <ul class="sub_menu">
                 <li><a href="#">Our History</a></li>
                <li><a href="#">Our Process</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Financing</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Subcontractors</a></li>
            </ul>
        </li>
        <li><a class="portfolio" href="#">Portfolio</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="maintenance" href="#">Maintenance</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="testimonials" href="#">Testimonials</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="contact" href="#">Contact Us</a></li>
    </ul>

提前感谢您的帮助

试试这样的方法：

$('ul.dropdown li').hover(function() {
    $(this).parents('ul').addClass('hover');
});

您可以为“sub_菜单”添加jQuery悬停事件处理程序，并手动更改下拉列表的颜色

$(this).parents('li').addClass('hover');

这应该得到父级

li

，并给它一个hover类。在第二个函数中执行相反的操作（

removeClass（）

）以去除颜色

如果

this

有多个

li

父类，那么它也应该给它们hover类。如果只需要第一个

li

，请使用

li:first

作为选择器

有一个有效的例子。我使用了

bind（'mouseover'）

和

bind（'mouseout'）

，原因很简单，因为我已经习惯了这样做。我使用了你的HTML，希望这会有所帮助……所有的代码都在页面上内联，因此很容易查看。

为什么你要使用jQuery来完成CSS允许你做的事情？我认为如果你使用以下选择器：

ul.dropdown li a.home:hover,
ul.dropdown li:hover { /* this targets the parent li's default hover state set it to the green colour */ }

ul.dropdown li ul li:hover,
ul.dropdown li ul li a:hover { /* this targets the dropdown li's default state set this to gold */ }

它应该会起作用

根据评论进行编辑

在Chrome、Firefox和Opera上的演示站点看起来很稳定，可以在以下网址找到：，请原谅这个丑陋的站点。它很实用，不漂亮=/

编辑以使接受的代码内联 我想，在某个时候，我可能会整理我的网站，代码在这里可能更有用。因此，整体而言：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>list styling demo-page for Stackoverflow.com question 1517220</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <style type="text/css" media="all">

    ul.dropdown     {width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    }

    ul.dropdown li      {display: inline-block;
                    position: relative;
                    padding: 0 1em;
                    color: #fff;
                    background-color: #a18524;
                    }

    ul.dropdown li.hover    {background-color: #a18524;
                    }

    ul.dropdown li a    {text-decoration: none;
                    display: block;
                    color: #fff;
                    background-color: transparent;
                    }

    ul.dropdown li:hover,
    ul.dropdown li a:hover  {color: #fff;
                    background-color: #41602a;
                    }

    ul.dropdown li ul   {display: none;
                    position: absolute;
                    top: 1em;
                    left: 0;
                    }

    ul.dropdown li:hover ul
                    {display: block;
                    }

    ul.dropdown li ul li    {display: block;
                    border-bottom: 1px solid #fff;
                    line-height: 1.4em;
                    }

    ul.dropdown li ul li a  {width: 10em;
                    border
                    }

    #code           {white-space: pre-wrap;
                    width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    line-height: 1.2em;
                    font-family: consolas, mono;
                    }

    </style>

    <script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>

       <ul class="dropdown">
    <li><a class="home" href="#">Home</a></li>
        <li><a class="about" href="#">About Us</a>
            <ul class="sub_menu">
                 <li><a href="#">Our History</a></li>
                <li><a href="#">Our Process</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Financing</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Subcontractors</a></li>
            </ul>
        </li>
        <li><a class="portfolio" href="#">Portfolio</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="maintenance" href="#">Maintenance</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="testimonials" href="#">Testimonials</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="contact" href="#">Contact Us</a></li>
    </ul>


<div id="code">
    ul.dropdown     {width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    }

    ul.dropdown li      {display: inline-block;
                    position: relative;
                    padding: 0 1em;
                    color: #fff;
                    background-color: #a18524;
                    }

    ul.dropdown li.hover
                    {background-color: #a18524;
                    }

    ul.dropdown li a    {text-decoration: none;
                    display: block;
                    color: #fff;
                    background-color: transparent;
                    }

    ul.dropdown li:hover,
    ul.dropdown li a:hover
                    {color: #fff;
                    background-color: #41602a;
                    }

    ul.dropdown li ul   {display: none;
                    position: absolute;
                    top: 1em;
                    left: 0;
                    }

    ul.dropdown li:hover ul
                    {display: block;
                    }

    ul.dropdown li ul li    {display: block;
                    border-bottom: 1px solid #fff;
                    line-height: 1.4em;
                    }

    ul.dropdown li ul li a
                    {width: 10em;
                    border
                    }
</div>

</body>

</html>


列出Stackoverflow.com问题1517220的样式演示页面
下拉列表{宽度：60%；
最大宽度：100em；
保证金：1em自动；
}
ul.dropdownli{显示：内联块；
位置：相对位置；
填充：0.1em；
颜色：#fff；
背景色：#a18524；
}
ul.dropdownli.hover{背景色：#a18524；
}
下拉列表li{文本装饰：无；
显示：块；
颜色：#fff；
背景色：透明；
}
下拉列表李：悬停，
下拉列表LIA：悬停{颜色：#fff；
背景色：#41602a；
}
ul.dropdownli ul{显示：无；
位置：绝对位置；
顶部：1米；
左：0；
}
ul.下拉列表li：悬停ul
{显示：块；
}
ul.下拉li ul li{显示：块；
边框底部：1px实心#fff；
线高：1.4em；
}
下拉式li{宽度：10em；
边境
}
#代码{空白：预换行；
宽度：60%；
最大宽度：100em；
保证金：1em自动；
线高：1.2米；
字体系列：consolas、mono；
}



































下拉列表{宽度：60%；
最大宽度：100em；
保证金：1em自动；
}
ul.dropdownli{显示：内联块；
位置：相对位置；
填充：0.1em；
颜色：#fff；
背景色：#a18524；
}
ul.下拉列表li.悬停
{背景色：#a18524；
}
下拉列表li{文本装饰：无；
显示：块；
颜色：#fff；
背景色：透明；
}
下拉列表李：悬停，
下拉列表李a：悬停
{颜色：#fff；
背景色：#41602a；
}
ul.dropdownli ul{显示：无；
位置：绝对位置；
顶部：1米；
左：0；
}
ul.下拉列表li：悬停ul
{显示：块；
}
ul.下拉li ul li{显示：块；
边框底部：1px实心#fff；
线高：1.4em；
}
下拉列表li ul li a
{宽度：10em；
边境
}

嗨，杰夫，我按指示添加了这个，但当我鼠标移出时，它仍然会变成金色。如果我能麻烦你再看一眼的话。似乎我们正在寻找父项的父项，因为它是li>ul>li。你认为呢？我的原版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>list styling demo-page for Stackoverflow.com question 1517220</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <style type="text/css" media="all">

    ul.dropdown     {width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    }

    ul.dropdown li      {display: inline-block;
                    position: relative;
                    padding: 0 1em;
                    color: #fff;
                    background-color: #a18524;
                    }

    ul.dropdown li.hover    {background-color: #a18524;
                    }

    ul.dropdown li a    {text-decoration: none;
                    display: block;
                    color: #fff;
                    background-color: transparent;
                    }

    ul.dropdown li:hover,
    ul.dropdown li a:hover  {color: #fff;
                    background-color: #41602a;
                    }

    ul.dropdown li ul   {display: none;
                    position: absolute;
                    top: 1em;
                    left: 0;
                    }

    ul.dropdown li:hover ul
                    {display: block;
                    }

    ul.dropdown li ul li    {display: block;
                    border-bottom: 1px solid #fff;
                    line-height: 1.4em;
                    }

    ul.dropdown li ul li a  {width: 10em;
                    border
                    }

    #code           {white-space: pre-wrap;
                    width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    line-height: 1.2em;
                    font-family: consolas, mono;
                    }

    </style>

    <script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>

       <ul class="dropdown">
    <li><a class="home" href="#">Home</a></li>
        <li><a class="about" href="#">About Us</a>
            <ul class="sub_menu">
                 <li><a href="#">Our History</a></li>
                <li><a href="#">Our Process</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Financing</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Subcontractors</a></li>
            </ul>
        </li>
        <li><a class="portfolio" href="#">Portfolio</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="maintenance" href="#">Maintenance</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="testimonials" href="#">Testimonials</a>
            <ul class="sub_menu">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                 <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li><a class="contact" href="#">Contact Us</a></li>
    </ul>


<div id="code">
    ul.dropdown     {width: 60%;
                    max-width: 100em;
                    margin: 1em auto;
                    }

    ul.dropdown li      {display: inline-block;
                    position: relative;
                    padding: 0 1em;
                    color: #fff;
                    background-color: #a18524;
                    }

    ul.dropdown li.hover
                    {background-color: #a18524;
                    }

    ul.dropdown li a    {text-decoration: none;
                    display: block;
                    color: #fff;
                    background-color: transparent;
                    }

    ul.dropdown li:hover,
    ul.dropdown li a:hover
                    {color: #fff;
                    background-color: #41602a;
                    }

    ul.dropdown li ul   {display: none;
                    position: absolute;
                    top: 1em;
                    left: 0;
                    }

    ul.dropdown li:hover ul
                    {display: block;
                    }

    ul.dropdown li ul li    {display: block;
                    border-bottom: 1px solid #fff;
                    line-height: 1.4em;
                    }

    ul.dropdown li ul li a
                    {width: 10em;
                    border
                    }
</div>

</body>

</html>