我正在尝试制作一个简单的导航菜单,当它悬停在上面时,会在正在悬停的项目选项上方的一个小彩色方块(div)中淡入淡出。但是当物品悬停在正方形上时,它们的位置不正确。我很确定如果我将位置更改为绝对位置它会修复它,但我需要它在相对位置以便它们可以保持它们的位置。非常感谢任何帮助,非常感谢。
CodePen
HTML:
<div id='navbar'>
<ul class='navmen'>
<a href='#' class='link'>
<li class='navitem' id='home'>HOME</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item2'>ITEM2</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item3'>ITEM3</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item4'>ITEM4</li>
</a>
</ul>
</div>
<ul class='navmen'>
<li class='itemam'>
<div class='divmen' id='divred'></div>
</li>
<li class='itemam'>
<div class='divmen' id='divorange'></div>
</li>
<li class='itemam'>
<div class='divmen' id='divblue'></div>
</li>
<li class='itemam'>
<div class='divmen' id='divgreen'></div>
</li>
</ul>
CSS:
.navmen {
display: inline;
position: relative;
left: 230px;
}
.link {
text-decoration: none;
color: black;
display: inline;
}
.navitem {
font-family: 'Pragati Narrow', sans-serif;
display: inline;
padding-left: 80px;
padding-right: 80px;
font-size: 22px;
}
.navitem:hover {
background-color: #CCCCCC;
}
.divmen {
background-color: black;
width: 210px;
height: 10px;
}
#divred {
background-color: red;
position: relative;
bottom: 77px;
left: 40px;
display: none;
}
#divorange {
background-color: orange;
position: relative;
left: 250px;
bottom: 107px;
display: none;
}
#divblue {
background-color: blue;
position: relative;
left: 460px;
bottom: 137px;
display: none;
}
#divgreen {
background-color: green;
position: relative;
bottom: 167px;
left: 670px;
display: none;
}
JavaScript的:
$(document).ready(function() {
$('#home').hover(function() {
$('#divred').fadeToggle('slow')
})
});
$(document).ready(function() {
$('#item2').hover(function() {
$('#divorange').fadeToggle('slow')
})
});
$(document).ready(function() {
$('#item3').hover(function() {
$('#divblue').fadeToggle('slow')
})
});
$(document).ready(function() {
$('#item4').hover(function() {
$('#divgreen').fadeToggle('slow')
})
});
答案 0 :(得分:0)
请检查以下代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#home').hover(function() {
$('#divred').fadeToggle('slow')
})
$('#item2').hover(function() {
$('#divorange').fadeToggle('slow')
})
$('#item3').hover(function() {
$('#divblue').fadeToggle('slow')
})
$('#item4').hover(function() {
$('#divgreen').fadeToggle('slow')
})
});
</script>
<style type="text/css">
.navmen {
display: inline;
position: relative;
left: 230px;
}
.link {
text-decoration: none;
color: black;
display: inline;
}
.navitem {
font-family: 'Pragati Narrow', sans-serif;
display: inline;
padding-left: 80px;
padding-right: 80px;
font-size: 22px;
}
.navitem:hover {
background-color: #CCCCCC;
}
.itemam{
height: 18px;
}
.divmen {
width: 210px;
display:none;
}
</style>
</head>
<body>
<div id='navbar'>
<ul class='navmen'>
<a href='#' class='link'>
<li class='navitem' id='home'>HOME</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item2'>ITEM2</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item3'>ITEM3</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item4'>ITEM4</li>
</a>
</ul>
</div>
<ul class='navmen'>
<li class='itemam'>
<div class='divmen' id='divred'>divred</div>
</li>
<li class='itemam'>
<div class='divmen' id='divorange'>divorange</div>
</li>
<li class='itemam'>
<div class='divmen' id='divblue'>divblue</div>
</li>
<li class='itemam'>
<div class='divmen' id='divgreen'>divgreen</div>
</li>
</ul>
</body>
</html>
答案 1 :(得分:0)
我想你想要这样的东西。
不需要JS / JQ
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navmen {
margin-top: 25px;
list-style-type: none;
text-align: center;
}
.navitem {
font-family: 'Pragati Narrow', sans-serif;
display: inline-block;
border-top: 10px solid transparent;
transition: border .5s ease;
}
.navitem a {
text-decoration: none;
padding-left: 20px;
padding-right: 20px;
font-size: 22px;
display: block;
color: #000;
}
.navitem:hover a {
background: #ccc;
}
.red:hover {
border-top-color: red;
}
.green:hover {
border-top-color: green;
}
.blue:hover {
border-top-color: blue;
}
&#13;
<div id="navbar">
<ul class="navmen">
<li class="navitem red" id="home"><a href="#">HOME</a>
</li>
<li class="navitem green" id="item2"><a href="#">ITEM2</a>
</li>
<li class="navitem blue" id="item3"><a href="#">ITEM3</a>
</li>
</ul>
</div>
&#13;