Как убрать эффект наведения изображения? - PullRequest
Новая
       14

Как убрать эффект наведения изображения?

0 голосов
/ 04 мая 2020

У меня есть панель навигации с некоторыми значками с эффектом наведения / наложения, но почему-то два значка справа имеют странный эффект, который выталкивает изображение в верхний правый угол. Я хочу, чтобы эффект наведения был похож на значок слева. Я использовал изображения .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>

Ответы [ 4 ]

1 голос
/ 04 мая 2020

Удалите поля сверху и слева от .naviconshov2 и .naviconshov3 

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 голос
/ 04 мая 2020

при наведении курсора вы меняли положение вашего элемента на 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 голос
/ 04 мая 2020

Я просто удаляю часть вашего кода (переход): 

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>
0 голосов
/ 04 мая 2020

Это потому, что у вас есть transition CSS атрибуты, установленные для иконок: 

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

просто удалите эти строки, и вы хороши для go: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...