Различное поведение стиля div hover в динамическом и статическом HTML - PullRequest
Новая
       10

Различное поведение стиля div hover в динамическом и статическом HTML

0 голосов
/ 27 января 2012

Этот вопрос касается различия в поведении CSS между страницей статического html, использующей тот же HTML и стили, что и страница, сгенерированная динамически с использованием PHP.

На статической странице эффект наведения применяется следующими стилями, определенными в отдельной таблице стилей: 

div.selectable_class { background-color:white}
div.selectable_class:hover { background-color:blue }

Статический фрагмент HTML выглядит следующим образом: 

<div class="selectable_class" onclick="event handler here">
    <div class="ano_class">
        <!-- Contents-->
    </div>
</div>

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

Затем я использовал ту же таблицу стилей и сгенерировал HTML динамически, используя PHP, и заметил, что эффект наведения был потерян, но изменение цвета вызвано нажатием на div.

Чтобы подтвердить, что я генерировал динамический HTML правильно, я сделал View Source и скопировал сгенерированный HTML в отдельный файл, а затем загрузил его в.

Волшебно, эффект парения работал правильно в этой версии!

Я посмотрел в другом месте на этом сайте и увидел упоминание о типе документа, оказывающего влияние. В обоих случаях мой тип документа указан следующим образом: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Для вашей информации я использую Safari версии 5.1.2.

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

Ответы [ 2 ]

1 голос
/ 27 января 2012

PHP работает на сервере и не знает и не влияет на то, как веб-браузер отображает полученный HTML, CSS. Если есть разница, это означает, что HTML / CSS, который вы генерируете с помощью PHP, отличается от HTML / CSS, содержащегося на статической странице.

0 голосов
/ 27 января 2012

Это не обязательно ответ на ваш вопрос, но имейте в виду, что ранние версии IE не понимают: наведите курсор на элемент, который НЕ является ссылкой.Я не уверен, в какой версии это перестало быть правдой.

Если вы ищете кросс-браузерное решение, то вам, возможно, придется прибегнуть к функции javascript, напримерjQuery's .hover () .Это также может быть способом решения вашей текущей проблемы.

...