如何去除图片悬浮效果？

问题描述 投票：0回答：1

我有一个导航栏，里面的一些图标有悬浮叠加的效果，但是不知道为什么右边的两个图标有一种奇怪的效果，把图片推到了右上方。我想让悬浮效果和左边的图标一样。我为所有的图标使用了.gif图片。

我怎样才能改变效果，使它的行为像左边的图标（配置文件）？

nav {
	background-color: #ffffff;
	position: absolute;
	width: 600px;
	height: 30px;
	margin-left: 200px;
	font-size: 1em;
}

nav ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

nav li {
	display: inline;
	float: left;
	width: auto;
}

nav li a {
	display: block;
	padding: 10px 10px;
	text-align: center;
	color: #7dc623;
}

nav li a:hover {
	background-color: #7dc623;
	color: #ffffff;
}

.active {
	background-color: #7dc623;
	color: #ffffff;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #ffffff;
	min-width: 130px;
	margin-top: -1px;
	padding-top: 1px;
	color: #7dc623;
	z-index: 1;
}

.dropdown-content a {
	float: none;
	display: block;
 	padding: 10px 10px;
	color: #7dc623;
	text-decoration: none;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: #7dc623;
	color: #ffffff;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.iconwrap {
  width: 100%;
  position: relative;
  margin-left: 380px;
  }

.navicons1, .navicons2, .navicons3 {
  width: 20px;
  height: 20px;
  padding: 7px 10px;
  background: #7dc623;
  opacity: 1;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.naviconshov1, .naviconshov2, .naviconshov3 {
  width: 20px;
  height: 20px;
  padding: 7px 10px;
  background: #ffffff;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.navicons1:hover .naviconshov1 {
  opacity: 0;
}

.navicons2:hover .naviconshov2 {
  opacity: 0;
  margin-top: -34px;
  margin-left: 34px;
}

.navicons3:hover .naviconshov3 {
  opacity: 0;
  margin-top: -34px;
  margin-left: 68px;
}

.navicons2 {
  margin-top: -34px;
  margin-left: 40px;
}

.navicons3  {
  margin-top: -34px;
  margin-left: 80px;
}
<nav>
  <ul>
	  <li><a href="test.html">Nu bestellen</a></li>
		<li><a href="test.html">Zo werkt het</a></li>
		<li class="dropdown">
      <a href="test.html">Recepten</a>
			  <div class="dropdown-content">
     		  <a href="test.html">Op het menu</a>
				  <a href="test.html">Alle recepten</a>	
   		  </div>
 	  </li>
  </ul>
      
  <div class="iconwrap">
    <div class="navicons1">
		  <div class="naviconshov1"><img src="https://i.imgur.com/FMb2eun.gif"/></div>
        <a href="test.html"><img src="https://i.imgur.com/6w5w1r8.gif" alt="account"/></a>
      </div>
   <div class="navicons2">
      <div class="naviconshov2"><img src="https://i.imgur.com/QGZVEQl.gif"/></div>
		    <a href="test.html"><img src="https://i.imgur.com/1eY8XZN.gif" alt="favorieten"/></a>
      </div>
    <div class="navicons3">
      <div class="naviconshov3"><img src="https://i.imgur.com/ueXdZR8.gif"/></div>
		    <a href="test.html"><img src="https://i.imgur.com/eLs1Ipo.gif" alt="winkelwagen"/></a>
	  </div>
  </div>
</nav>
html css
1个回答
1
投票

悬停时，你通过margin-top和margin-left改变了你的项目的位置，导致了这种效果，只要把这个去掉就可以了。

nav {
	background-color: #ffffff;
	position: absolute;
	width: 600px;
	height: 30px;
	margin-left: 200px;
	font-size: 1em;
}

nav ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

nav li {
	display: inline;
	float: left;
	width: auto;
}

nav li a {
	display: block;
	padding: 10px 10px;
	text-align: center;
	color: #7dc623;
}

nav li a:hover {
	background-color: #7dc623;
	color: #ffffff;
}

.active {
	background-color: #7dc623;
	color: #ffffff;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #ffffff;
	min-width: 130px;
	margin-top: -1px;
	padding-top: 1px;
	color: #7dc623;
	z-index: 1;
}

.dropdown-content a {
	float: none;
	display: block;
 	padding: 10px 10px;
	color: #7dc623;
	text-decoration: none;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: #7dc623;
	color: #ffffff;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.iconwrap {
  width: 100%;
  position: relative;
  margin-left: 380px;
  }

.navicons1, .navicons2, .navicons3 {
  width: 20px;
  height: 20px;
  padding: 7px 10px;
  background: #7dc623;
  opacity: 1;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.naviconshov1, .naviconshov2, .naviconshov3 {
  width: 20px;
  height: 20px;
  padding: 7px 10px;
  background: #ffffff;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.navicons1:hover .naviconshov1 {
  opacity: 0;
}

.navicons2:hover .naviconshov2 {
  opacity: 0;
}

.navicons3:hover .naviconshov3 {
  opacity: 0;
}

.navicons2 {
  margin-top: -34px;
  margin-left: 40px;
}

.navicons3  {
  margin-top: -34px;
  margin-left: 80px;
}
<nav>
  <ul>
	  <li><a href="test.html">Nu bestellen</a></li>
		<li><a href="test.html">Zo werkt het</a></li>
		<li class="dropdown">
      <a href="test.html">Recepten</a>
			  <div class="dropdown-content">
     		  <a href="test.html">Op het menu</a>
				  <a href="test.html">Alle recepten</a>	
   		  </div>
 	  </li>
  </ul>
      
  <div class="iconwrap">
    <div class="navicons1">
		  <div class="naviconshov1"><img src="https://i.imgur.com/FMb2eun.gif"/></div>
        <a href="test.html"><img src="https://i.imgur.com/6w5w1r8.gif" alt="account"/></a>
      </div>
   <div class="navicons2">
      <div class="naviconshov2"><img src="https://i.imgur.com/QGZVEQl.gif"/></div>
		    <a href="test.html"><img src="https://i.imgur.com/1eY8XZN.gif" alt="favorieten"/></a>
      </div>
    <div class="navicons3">
      <div class="naviconshov3"><img src="https://i.imgur.com/ueXdZR8.gif"/></div>
		    <a href="test.html"><img src="https://i.imgur.com/eLs1Ipo.gif" alt="winkelwagen"/></a>
	  </div>
  </div>
</nav>
1
投票

我只是删除了你的部分代码（过渡）。

nav {
	background-color: #ffffff;
	position: absolute;
	width: 600px;
	height: 30px;
	margin-left: 200px;
	font-size: 1em;
}

nav ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

nav li {
	display: inline;
	float: left;
	width: auto;
}

nav li a {
	display: block;
	padding: 10px 10px;
	text-align: center;
	color: #7dc623;
}

nav li a:hover {
	background-color: #7dc623;
	color: #ffffff;
}

.active {
	background-color: #7dc623;
	color: #ffffff;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #ffffff;
	min-width: 130px;
	margin-top: -1px;
	padding-top: 1px;
	color: #7dc623;
	z-index: 1;
}

.dropdown-content a {
	float: none;
	display: block;
 	padding: 10px 10px;
	color: #7dc623;
	text-decoration: none;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: #7dc623;
	color: #ffffff;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.iconwrap {
  width: 100%;
  position: relative;
  margin-left: 380px;
  }

.navicons1, .navicons2, .navicons3 {
  width: 20px;
  height: 20px;
  padding: 7px 10px;
  background: #7dc623;
  opacity: 1;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;

}

.naviconshov1, .naviconshov2, .naviconshov3 {
  width: 20px;
  height: 20px;
  padding: 7px 10px;
  background: #ffffff;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;

}

.navicons1:hover .naviconshov1 {
  opacity: 0;
}

.navicons2:hover .naviconshov2 {
  opacity: 0;
  margin-top: -34px;
  margin-left: 34px;
}

.navicons3:hover .naviconshov3 {
  opacity: 0;
  margin-top: -34px;
  margin-left: 68px;
}

.navicons2 {
  margin-top: -34px;
  margin-left: 40px;
}

.navicons3  {
  margin-top: -34px;
  margin-left: 80px;
}
<nav>
  <ul>
	  <li><a href="test.html">Nu bestellen</a></li>
		<li><a href="test.html">Zo werkt het</a></li>
		<li class="dropdown">
      <a href="test.html">Recepten</a>
			  <div class="dropdown-content">
     		  <a href="test.html">Op het menu</a>
				  <a href="test.html">Alle recepten</a>	
   		  </div>
 	  </li>
  </ul>
      
  <div class="iconwrap">
    <div class="navicons1">
		  <div class="naviconshov1"><img src="https://i.imgur.com/FMb2eun.gif"/></div>
        <a href="test.html"><img src="https://i.imgur.com/6w5w1r8.gif" alt="account"/></a>
      </div>
   <div class="navicons2">
      <div class="naviconshov2"><img src="https://i.imgur.com/QGZVEQl.gif"/></div>
		    <a href="test.html"><img src="https://i.imgur.com/1eY8XZN.gif" alt="favorieten"/></a>
      </div>
    <div class="navicons3">
      <div class="naviconshov3"><img src="https://i.imgur.com/ueXdZR8.gif"/></div>
		    <a href="test.html"><img src="https://i.imgur.com/eLs1Ipo.gif" alt="winkelwagen"/></a>
	  </div>
  </div>
</nav>
1
投票

从.naviconshov2和.naviconshov3中删除margin-top & left。

nav {
	background-color: #ffffff;
	position: absolute;
	width: 600px;
	height: 30px;
	margin-left: 200px;
	font-size: 1em;
}

nav ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

nav li {
	display: inline;
	float: left;
	width: auto;
}

nav li a {
	display: block;
	padding: 10px 10px;
	text-align: center;
	color: #7dc623;
}

nav li a:hover {
	background-color: #7dc623;
	color: #ffffff;
}

.active {
	background-color: #7dc623;
	color: #ffffff;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #ffffff;
	min-width: 130px;
	margin-top: -1px;
	padding-top: 1px;
	color: #7dc623;
	z-index: 1;
}

.dropdown-content a {
	float: none;
	display: block;
 	padding: 10px 10px;
	color: #7dc623;
	text-decoration: none;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: #7dc623;
	color: #ffffff;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.iconwrap {
  width: 100%;
  position: relative;
  margin-left: 380px;
  }

.navicons1, .navicons2, .navicons3 {
  width: 20px;
  height: 20px;
  padding: 7px 10px;
  background: #7dc623;
  opacity: 1;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.naviconshov1, .naviconshov2, .naviconshov3 {
  width: 20px;
  height: 20px;
  padding: 7px 10px;
  background: #ffffff;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.navicons1:hover .naviconshov1 {
  opacity: 0;
}

.navicons2:hover .naviconshov2 {
  opacity: 0;
}

.navicons3:hover .naviconshov3 {
  opacity: 0;
}

.navicons2 {
  margin-top: -34px;
  margin-left: 40px;
}

.navicons3  {
  margin-top: -34px;
  margin-left: 80px;
}
<nav>
  <ul>
	  <li><a href="test.html">Nu bestellen</a></li>
		<li><a href="test.html">Zo werkt het</a></li>
		<li class="dropdown">
      <a href="test.html">Recepten</a>
			  <div class="dropdown-content">
     		  <a href="test.html">Op het menu</a>
				  <a href="test.html">Alle recepten</a>	
   		  </div>
 	  </li>
  </ul>
      
  <div class="iconwrap">
    <div class="navicons1">
		  <div class="naviconshov1"><img src="https://i.imgur.com/FMb2eun.gif"/></div>
        <a href="test.html"><img src="https://i.imgur.com/6w5w1r8.gif" alt="account"/></a>
      </div>
   <div class="navicons2">
      <div class="naviconshov2"><img src="https://i.imgur.com/QGZVEQl.gif"/></div>
		    <a href="test.html"><img src="https://i.imgur.com/1eY8XZN.gif" alt="favorieten"/></a>
      </div>
    <div class="navicons3">
      <div class="naviconshov3"><img src="https://i.imgur.com/ueXdZR8.gif"/></div>
		    <a href="test.html"><img src="https://i.imgur.com/eLs1Ipo.gif" alt="winkelwagen"/></a>
	  </div>
  </div>
</nav>
0
投票

这是因为你有 过渡 为图标设置的CSS属性。

-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;

只需删除这几行就可以了。

nav {
	background-color: #ffffff;
	position: absolute;
	width: 600px;
	height: 30px;
	margin-left: 200px;
	font-size: 1em;
}

nav ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

nav li {
	display: inline;
	float: left;
	width: auto;
}

nav li a {
	display: block;
	padding: 10px 10px;
	text-align: center;
	color: #7dc623;
}

nav li a:hover {
	background-color: #7dc623;
	color: #ffffff;
}

.active {
	background-color: #7dc623;
	color: #ffffff;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #ffffff;
	min-width: 130px;
	margin-top: -1px;
	padding-top: 1px;
	color: #7dc623;
	z-index: 1;
}

.dropdown-content a {
	float: none;
	display: block;
 	padding: 10px 10px;
	color: #7dc623;
	text-decoration: none;
	text-align: left;
}

.dropdown-content a:hover {
	background-color: #7dc623;
	color: #ffffff;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.iconwrap {
  width: 100%;
  position: relative;
  margin-left: 380px;
  }

.navicons1, .navicons2, .navicons3 {
  width: 20px;
  height: 20px;
  padding: 7px 10px;
  background: #7dc623;
  opacity: 1;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
}

.naviconshov1, .naviconshov2, .naviconshov3 {
  width: 20px;
  height: 20px;
  padding: 7px 10px;
  background: #ffffff;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.navicons1:hover .naviconshov1 {
  opacity: 0;
}

.navicons2:hover .naviconshov2 {
  opacity: 0;
  margin-top: -34px;
  margin-left: 34px;
}

.navicons3:hover .naviconshov3 {
  opacity: 0;
  margin-top: -34px;
  margin-left: 68px;
}

.navicons2 {
  margin-top: -34px;
  margin-left: 40px;
}

.navicons3  {
  margin-top: -34px;
  margin-left: 80px;
}
<nav>
  <ul>
	  <li><a href="test.html">Nu bestellen</a></li>
		<li><a href="test.html">Zo werkt het</a></li>
		<li class="dropdown">
      <a href="test.html">Recepten</a>
			  <div class="dropdown-content">
     		  <a href="test.html">Op het menu</a>
				  <a href="test.html">Alle recepten</a>	
   		  </div>
 	  </li>
  </ul>
      
  <div class="iconwrap">
    <div class="navicons1">
		  <div class="naviconshov1"><img src="https://i.imgur.com/FMb2eun.gif"/></div>
        <a href="test.html"><img src="https://i.imgur.com/6w5w1r8.gif" alt="account"/></a>
      </div>
   <div class="navicons2">
      <div class="naviconshov2"><img src="https://i.imgur.com/QGZVEQl.gif"/></div>
		    <a href="test.html"><img src="https://i.imgur.com/1eY8XZN.gif" alt="favorieten"/></a>
      </div>
    <div class="navicons3">
      <div class="naviconshov3"><img src="https://i.imgur.com/ueXdZR8.gif"/></div>
		    <a href="test.html"><img src="https://i.imgur.com/eLs1Ipo.gif" alt="winkelwagen"/></a>
	  </div>
  </div>
</nav>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.