CSS,jQuery和导航控制 - 需要一个小调整

时间:2010-02-24 23:33:05

标签: jquery css

我有一个导航,使用jQuery和CSS来控制图像鼠标悬停定位和下拉菜单。一切都按预期工作。我收到了客户的请求,但要进行一次修改。

您可以在此处看到示例:http://www.rouviere.com/jr/index.html(最好在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>

最后但并非最不重要的是jQuery:

$(function(){

$("ul.dropdown li").hover(function(){

    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');

}, function(){

    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');

});

$("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

});

提前感谢您的帮助!

4 个答案:

答案 0 :(得分:1)

为什么使用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上找到了 http://davidrhysthomas.co.uk/so/parentLiStyles.html,请原谅丑陋。它很实用,不漂亮...... = /

<小时/> 已修改为已接受的代码内嵌 我想,在某些时候,我可能会整理我的网站,无论如何代码可能会更有用。所以这就完整了:

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

答案 1 :(得分:0)

尝试这样的事情:

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

那应该得到父li并给它悬停类。在第二个函数中执行相反的操作(removeClass())以消除颜色。

如果this有多个li个父母,那么它也应该为他们提供悬停类。如果您只想要第一个li,请使用li:first作为选择器。


http://jeffrupert.com/test/有一个有效的例子。我使用bind('mouseover'bind('mouseout'只是因为这是我以前做的事情。我使用了您的确切HTML,希望这有助于...所有代码都在页面上内嵌,因此很容易查看。