Предотвращение эффекта при наведении на неправильный элемент - PullRequest
Новая
       17

Предотвращение эффекта при наведении на неправильный элемент

2 голосов
/ 12 марта 2019

К кнопке .dropbtn прикреплен стиль, поэтому при наведении на нее показывается div .dropdown-content путем добавления непрозрачности к этому элементу. Однако при наведении курсора на точку под кнопкой, где появляется .dropdown-content, кажется, что запускается наведение, которое должно происходить, только когда я наводю курсор на .dropbtn. Почему это происходит?

Есть несколько «решений», таких как добавление переполнения: скрытое в .dropdown и добавление его обратно при наведении, но оно влияет на преобразование, которое я прикрепил к .dropdown-content. Добавление display: none и display: block к содержимому .dropdown также нарушает эффект преобразования, который я хочу. 

* {
	font-family:sans-serif;
}
body {
	background-image:linear-gradient(to right,#42b4ce,#fd3838);
}
.dropbtn {
  background:none;
  color: white;
  font-size: 16px;
  border: none;
  cursor:pointer;
  padding:0 0 10px;
}

.dropdown {
  position: relative;
  width: 160px;
  margin: 0 auto;
  display: block;
  
}

.dropdown-content {
  opacity:0;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 400px;
  right:-80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: -1;
  transform-origin: top center;
  transform:rotate3d(-40, 4, 1.5, 45deg);
  transition:.2s;
  border-radius:10px;
}

.dropdown-content a {
  color: black;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {color: purple;}

.dropdown:hover .dropdown-content {
	opacity:1;
	transform:rotate3d(0, 0, 0, 40deg);
	z-index:0;
}

.dropdown:hover .dropbtn {text-shadow:1px 1px 2px rgba(0,0,0,0.6)};
<body>
  <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
</body>

Ответы [ 3 ]

1 голос
/ 13 марта 2019

Добавьте visibility: hidden; к классу .dropdown-content и visibility: visible к нему при наведении .dropdown.Смотрите код ниже. 

* {
	font-family:sans-serif;
}
body {
	background-image:linear-gradient(to right,#42b4ce,#fd3838);
}
.dropbtn {
  background:none;
  color: white;
  font-size: 16px;
  border: none;
  cursor:pointer;
  padding:0 0 10px;
}

.dropdown {
  position: relative;
  width: 160px;
  margin: 0 auto;
  display: block;
  
}

.dropdown-content {
  opacity:0;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 400px;
  right:-80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: -1;
  transform-origin: top center;
  transform:rotate3d(-40, 4, 1.5, 45deg);
  transition:.2s;
  border-radius:10px;
  visibility: hidden;
}

.dropdown-content a {
  color: black;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {color: purple;}

.dropdown:hover .dropdown-content {
	opacity:1;
	transform:rotate3d(0, 0, 0, 40deg);
	z-index:0;
    visibility: visible;
}

.dropdown:hover .dropbtn {text-shadow:1px 1px 2px rgba(0,0,0,0.6)};
<body>
  <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
</body>
1 голос
/ 13 марта 2019

Одна идея состоит в том, чтобы просто увеличить высоту тела, чтобы элемент шел за ним, поскольку он имеет отрицательное значение z-index

* {
	font-family:sans-serif;
}
body {
	background-image:linear-gradient(to right,#42b4ce,#fd3838);
  margin:0;
  height:100vh;
}
.dropbtn {
  background:none;
  color: white;
  font-size: 16px;
  border: none;
  cursor:pointer;
  padding:10px;
}

.dropdown {
  position: relative;
  width: 160px;
  margin: 0 auto;
  display: block;
  
}

.dropdown-content {
  opacity:0;
  position: absolute;
  z-index:-1;
  background-color: #f1f1f1;
  min-width: 400px;
  right:-80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  transform-origin: top center;
  transform:rotate3d(-40, 4, 1.5, 45deg);
  transition:.2s;
  border-radius:10px;
}

.dropdown-content a {
  color: black;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {color: purple;}

.dropdown:hover .dropdown-content {
	opacity:1;
	transform:rotate3d(0, 0, 0, 40deg);
	z-index:0;
}

.dropdown:hover .dropbtn {text-shadow:1px 1px 2px rgba(0,0,0,0.6)};
<body>
  <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
</body>

Вот связанный вопрос, чтобы понять, как работает этот трюк : странное поведение z-index?

И чтобы понять, почему ваш градиент покрывал весь экран, даже если на теле не установлена ​​высота, вы можете проверить это: Как убрать полосы, которые появляются при использовании свойства линейного градиента?

0 голосов
/ 13 марта 2019

Просто добавьте pointer-events: none; для .dropdown-content и pointer-events: auto для селектора .dropdown:hover .dropdown-content

Демо

...