Javascript 水平导航菜单-如何增加<；李>；悬停_Javascript_Jquery_Html_Css

Javascript 水平导航菜单-如何增加<；李>；悬停

javascript jquery html css

Javascript 水平导航菜单-如何增加<；李>；悬停,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在制作一个导航菜单。我正在努力实现这样的目标：www.fizjoterapia-domkrakow.pl/ 我已经搜索了很多次，但当我将鼠标悬停在上时，找不到增加其大小的方法。我正在使用jquery（mouseover）向添加新类，该类的大小将更大另外，悬停元素上有一个ribbon阴影效果，我不知道如何实现它我遇到的另一个问题是标题中元素的不透明度。我把logo放在一个div里，把菜单放在另一个div里。它们都位于背景设置为“不透明度：0.9”的中。不幸的是，我的徽标和菜单也设置为这样的

我正在制作一个导航菜单。我正在努力实现这样的目标：www.fizjoterapia-domkrakow.pl/

我已经搜索了很多次，但当我将鼠标悬停在

上时，找不到增加其大小的方法。我正在使用jquery（mouseover）向

添加新类，该类的大小将更大

另外，悬停元素上有一个ribbon阴影效果，我不知道如何实现它

我遇到的另一个问题是标题中元素的不透明度。我把logo放在一个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中的

：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（82127157，.9）设置颜色

您需要使用选择器

#menuItems li.liOnHover

或

#menuItems li:hover

使悬停更改生效

此外，您应该将

#menuItems li

的

显示设置为内联块

希望这能有所帮助。
您是否知道至少从CSS 2开始就存在的名为：hover，但它仍然不能解决我的问题。如果我添加了这样的类，并将其设置为liOnHover的风格，这将不会有任何帮助。我的句子是一个评论，而不是一个答案。这只是为了确保您知道使用悬停的另一种方式，而不是作为您问题的答案。好的，谢谢。但是我认为我需要添加更多的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
}