псевдо-класс css не показывается или зависает - PullRequest
Новая
       43

псевдо-класс css не показывается или зависает

0 голосов
/ 22 марта 2012

У меня есть div в div, я пытаюсь сделать так, чтобы при наведении на родителя дочерний элемент менялся. Проблема в том, что я ничего не могу показать, я не знаю почему.

CSS: 

#3d_stack {
  border: 1px solid red;
  -webkit-transform: translate(-49px, 55px);
  -webkit-perspective-origin: 50% 50%;
  -webkit-perspective: 50;
  display: block;
  -webkit-border-radius: 5px;
  float: left;
  position: relative;
  height: 48px;
  width: 48px;
}

#3d_stack > div:first-child {
  -webkit-transform: translate3d(1px, 14px, 0px);
  border: 1px solid red;
  position: absolute;
  z-index: 12;
  height: 34px;
  width: 46px;
  background-color: #ffffff;
  opacity: .3;
}

#3d_stack:hover > div:first-child {
  -webkit-transform: translate3d(1px, 14px, 0px);
  border: 1px solid red;
  position: absolute;
  z-index: 12;
  height: 34px;
  width: 46px;
  background-color: #ffffff;
  opacity: .9;
}

HTML 

<div id="3d_stack">
  <div></div>
</div>

У меня настроена скрипка http://jsfiddle.net/4p8CM/223/

Ответы [ 4 ]

0 голосов
/ 11 августа 2016

Никто здесь не сделал другой, отремонтированный фрагмент, так что я сделал (убрал номер с первого места свойства ID).

Кроме того, как я вижу, вы использовали webkit префикс поставщика - вам следует подумать и о префиксе других поставщиков (я не знаю, какой браузер вы используете). Я нашел отличный инструмент онлайн, с помощью которого я также сделал префикс для вас.

Не вдаваясь в подробности, я вижу, что ваш transform может переместить контейнер за пределы поля зрения, поэтому, возможно, это может также вызвать некоторые проблемы с видимостью (во фрагменте кода видно, что он почти вне поля зрения). 1009 * 

#d_stack {
  border: 1px solid red;
  -webkit-transform: translate(-49px, 55px);
          transform: translate(-49px, 55px);
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
  -webkit-perspective: 50;
          perspective: 50;
  display: block;
  border-radius: 5px;
  float: left;
  position: relative;
  height: 48px;
  width: 48px;
}

#d_stack > div:first-child {
  -webkit-transform: translate3d(1px, 14px, 0px);
          transform: translate3d(1px, 14px, 0px);
  border: 1px solid red;
  position: absolute;
  z-index: 12;
  height: 34px;
  width: 46px;
  background-color: #ffffff;
  opacity: .3;
}

#d_stack:hover > div:first-child {
  -webkit-transform: translate3d(1px, 14px, 0px);
          transform: translate3d(1px, 14px, 0px);
  border: 1px solid red;
  position: absolute;
  z-index: 12;
  height: 34px;
  width: 46px;
  background-color: #ffffff;
  opacity: .9;
}
<div id="d_stack">
  <div></div>
</div>
0 голосов
/ 22 марта 2012

Вместо идентификатора используйте класс. т.е. 

<div class="box1"></div>
// css
div.box1{
}
0 голосов
/ 22 марта 2012

ID и классы не могут начинаться с цифр или символов.только в некоторых браузерах, но какой в ​​этом смысл.Для добавления (для справки) также не делайте ваши элементы (классы и идентификаторы) слишком короткими (например, 2 символа), так как в JavaScript возникнет проблема.

0 голосов
/ 22 марта 2012

Я не верю, что идентификаторы могут начинаться с цифр. Я удалил 3 с начала идентификатора div в HTML, и css и ваши div показывают.

...