Сочетание CSS: after и: hover: after для нескольких тегов HTML работает неправильно - PullRequest
Новая
       33

Сочетание CSS: after и: hover: after для нескольких тегов HTML работает неправильно

2 голосов
/ 17 декабря 2011

В настоящее время я сталкиваюсь с проблемой при попытке реализовать простой ролловер с использованием псевдоэлементов CSS: after и: hover.

Посмотрите на часы и значки facebook справа: http://clean.philippchristoph.de/

Вот код CSS: 

.icon {
    background: url('../img/clock_icon.png') top left no-repeat;
    width: 25px;
    height: 25px;
}

.icon:after {
    .transition(opacity, .2s, ease);

    content: " ";
    position: absolute;
    top: 4px; left: 5px; bottom: 0; right: 0;
    background: url('../img/clock_icon.png') no-repeat;
    background-position: -25px 0;
    opacity: 0;
}

.icon:hover:after, .clock:hover div {
    opacity: 1;
}

Как видите, изображение выцветает с использованием спрайта и непрозрачности.Тем не менее, теперь я не могу больше парить оба элемента.Как вы увидите на странице примера, вы можете навести курсор на значок Facebook, но не на часы.Если вы удалите значок Facebook, вы можете снова зависать над часами.Обратите внимание, что эти два значка являются полностью отдельными элементами.

Я тестировал это поведение на FF и Chrome в Windows.

Было бы замечательно, если бы кто-то мог пролить свет на эту проблему..:)

Ответы [ 2 ]

0 голосов
/ 17 декабря 2011

Замените ваш CSS этим (я имею в виду только упомянутые классы, а не весь ваш CSS :)): 

.icon {
     background: url("../img/clock_icon.png") no-repeat scroll left top transparent;
     height: 25px;
     width: 25px;
     position: relative
}

.icon:after {
     -moz-transition: opacity 0.2s ease 0s;
     background: url("../img/clock_icon.png") no-repeat scroll -25px 0pt transparent;
     bottom: 0pt;
     content: " ";
     left: 0;
     opacity: 0;
     position: absolute;
     right: 0pt;
     top: 0;
}

.icon:hover:after, .clock:hover div {
     opacity: 1;
}

.facebook, .facebook:after {
     background-image: url("../img/facebook_icon.png");
}

.clock {
    position: relative
}

.clock div {
     -moz-transition: opacity 0.2s ease 0s;
     color: #A0A0A0;
     font-size: 12px;
     left: 40px;
     line-height: 11px;
     opacity: 0;
     position: absolute;
     top: 5px;
     width: 160px
}
0 голосов
/ 17 декабря 2011

Вам необходимо добавить position: relative к вашему классу icon, чтобы сгенерированный контент располагался относительно этого, а не родительского. Я пытался упростить то, что у вас есть в скрипке , хотя я не был уверен на 100%, что вы ищете. Это близко? Я также изменил позиционирование сгенерированного контента.

Стоит отметить, что - досадно - вы не можете применить переход к сгенерированному контенту (именно поэтому любая попытка перехода непрозрачности на эти элементы в вашем случае потерпит неудачу). Надеюсь, это скоро изменится.

...