.fadeToggle 改变了我的 div 的位置答案

【问题标题】：.fadeToggle changes my div's positions.fadeToggle 改变了我的 div 的位置
【发布时间】：2015-05-22 21:08:55
【问题描述】：

我正在尝试制作一个简单的导航菜单，当将鼠标悬停在上面时，它会在悬停的项目选项上方的一个小彩色方块 (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')
  })
});

【问题讨论】：

如果您使用position 布置项目，那么您可能做错了什么，fade 不是您想要的。定位用于特定效果，不用于一般布局。
另外，您的 HTML 无效。链接应该在inside 列表项中。 ul 的唯一有效子代是 li

标签： javascript jquery html css hover

【解决方案1】：

请检查以下代码

<!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>

【讨论】：

【解决方案2】：

我想你想要这样的东西。

不需要 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;
}

<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>

【讨论】：