水平导航菜单 - 如何在悬停</li>上增加<li>的大小

时间:2014-09-05 20:10:31

标签: javascript jquery html css css3

我正在使用导航菜单。我正试图在这个网站上实现类似的东西:www.fizjoterapia-domkrakow.pl /

我一直在寻找很多东西,当我将鼠标悬停在它上面时,我无法找到增加

  • 大小的方法。我正在使用jquery(mouseover)将新类添加到
  • ,其大小会更大。

    此外,对悬停元素有一个带状阴影效果,我不知道如何实现它。

    我遇到的另一个问题是标题内元素的不透明度。我将徽标保留在另一个div中的div和菜单中。它们都在背景设置为不透明度:0.9。不幸的是,我的徽标和菜单也设置为这样的价值。任何想法如何摆脱它?

    以下是代码示例。

        <script>
            $(function () {
                $("#about2 li").mouseover(function () {
                    $(this).addClass("liOnHover")
                });
                $("#about2 li").mouseleave(function () {
                    $(this).removeClass("liOnHover")
                });
            })
        </script>
    </head>
    <body>
        <header>
            <div id="logo">
                <a href="#"><img src="~/Content/Images/logo.png" /></a>
            </div>
            <div id="menuItems">
                <ul id="about2">
                    <li id="contact">@Html.ActionLink("Home", "Home", "Home")</li>
                    <li id="about">@Html.ActionLink("About", "About", "About")</li>
                    <li id="priceList">@Html.ActionLink("PriceList", "PriceList", "Home")</li>
                    <li id="reviews">@Html.ActionLink("Reviews", "Reviews", "Home")</li>
    
                </ul>
            </div>
        </header>
    
        <section id="main">
    

    CSS:

    header {
        height: 200px;
        opacity: 0.9;
        background: #527F9D;
        box-shadow: 1px 1px 2px black;
      }
    
    
    #logo 
    {
        padding: 30px 0 20px 70px;
        float: left;
    }
    
    #main
    {
        margin:20px 210px 20px 210px;
        background-color: #ffffff;
        border-radius: 4px;
    }
    
    .liOnHover
    {
        background-Color:#0099FF;
        color: white;
        min-height: 100px;
        -webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
        -moz-box-shadow:    0px 6px 6px 0px rgba(34, 50, 60, 0.89);
        box-shadow:         0px 6px 6px 0px rgba(34, 50, 60, 0.89);
        text-align: center;
        display:inline-block
    }
    
    #menuItems {
        width: 900px;
        height: 36px;
        position: absolute;
        bottom:18px;
        right:20px;
        top:150px;
        left:350px;
        font-size: 23px;
        font-family: Enriqueta-Bold;
        font-weight: bold;
        text-align: center;
        background-color: #86ADED;
        -webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
        -moz-box-shadow:    0px 6px 6px 0px rgba(34, 50, 60, 0.89);
        box-shadow:         0px 6px 6px 0px rgba(34, 50, 60, 0.89);
    }
    
    #menuItems ul {
        padding: 2px 0;
        margin: 0;
    }
    
    #menuItems li {
    display: inline;
    padding: 4px;
    }
    
  • 2 个答案:

    答案 0 :(得分:1)

    您可以简单地使用CSS中的:hover属性

    ,而不是使用Javascript来实现此目的
    #menuItems li {
       display: inline;
       padding: 4px;
    }
    
    #menuItems li:hover {
       background-Color:#0099FF;
       color: white;
       min-height: 100px;
       -webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
       -moz-box-shadow:    0px 6px 6px 0px rgba(34, 50, 60, 0.89);
       box-shadow:         0px 6px 6px 0px rgba(34, 50, 60, 0.89);
       text-align: center;
       display:inline-block
    }
    

    关于你的第二个问题,不透明度总是影响元素的子元素,如果你只想使用透明背景,你可以使用background-color: rgba(82,127,157,.9)

    设置颜色

    答案 1 :(得分:1)

    您需要使用选择器#menuItems li.liOnHover#menuItems li:hover才能使悬停更改生效。

    此外,您应将display的{​​{1}}设置为#menuItems li

    希望这有帮助。