Можно ли создавать встроенные псевдо стили?

Ответ 1

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

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

<style type="text/css">
    .custom-class { background-color:green; }
    .custom-class:hover { background-color:Red; }
</style>
<a href="#" class="custom-class">Coding Horror</a>

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

К сожалению, нет изящного решения этой проблемы.

Ответ 2

Это своего рода ситуация с Catch-22.

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

С другой стороны, вы можете сделать что-то вроде этого:

<a href="#" onmouseover="this.style.color=red;" onmouseout="this.style.color='blue';">...</a>

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

Вы также можете ввести таблицу стилей на страницу, выписав тег ссылки или манипулируя документами .stylesheets, но это приведет к загрузке.

Я обычно видел первый метод (добавление блока стиля), сделанный на большом. "Модульные" сайты портала делают такие вещи, так что, может быть, это де-факто стандарт (по крайней мере, он более читабельный и, возможно, проще в обслуживании, чем там, где курсирует JavaScript?). Метод JavaScript, по-видимому, оказывает наименьшее влияние на DOM и общую страницу, поскольку вы сохраняете свою презентацию для себя.

Это один из тех мошенников с интерфейсом, где каждый ответ, который вы выбираете, в какой-то степени не прав, поэтому взвешивайте варианты и выбирайте, что вам проще всего создавать и поддерживать.

Ответ 3

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

<a style="color:blue" styleHover="color:blue" id="a1">Click!</a>

Ваш код может искать эти атрибуты и генерировать css файл на лету

#a1:hover {
  color:blue
}

Я не знаю, разрешает ли .NET разрешать вам этот тип разбора атрибутов, но я делаю что-то подобное в структуре, созданной для php.

Ответ 4

Или вы можете использовать jQuery hover и установите цвет фона.