我正在使用导航菜单。我正试图在这个网站上实现类似的东西:www.fizjoterapia-domkrakow.pl /
我一直在寻找很多东西,当我将鼠标悬停在它上面时,我无法找到增加
此外,对悬停元素有一个带状阴影效果,我不知道如何实现它。
我遇到的另一个问题是标题内元素的不透明度。我将徽标保留在另一个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;
}
答案 0 :(得分:1)
您可以简单地使用CSS中的:hover
属性
#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
。
希望这有帮助。