我正在制作导航菜单。我正在努力实现类似本网站上的目标:www.fizjoterapia-domkrakow.pl/
我一直在搜索，但我找不到在将鼠标悬停在
此外，悬停元素上有带状阴影效果，我不知道如何实现它。
我遇到的另一个问题是标题内元素的不透明度。我将 Logo 放在一个 div 中，将菜单放在另一个 div 中。它们都在背景设置为不透明度:0.9 的背景中。不幸的是，我的 Logo 和菜单也设置为这样的值。任何想法如何摆脱它？
这是代码示例。
<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;
}
最佳答案
您可以简单地使用 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)
关于javascript - 水平导航菜单 - 如何在悬停时增加 <li> 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25693290/