Увеличение блока при наведении css: html — увеличение блока при наведении курсора мыши

Создан 20 сен.

Не тот ответ, который вы ищете? Посмотрите другие вопросы с метками html css hover или задайте свой вопрос.

lang-html

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie Настроить параметры

html — Как изменить содержимое текстового поля при наведении курсора на фиксированный блок? (Другое решение не сработало)

: при наведении курсора не запускается какое-либо событие «щелчок», «касание» или «смахивание», иначе вы могли бы использовать селектор : target (W3Schools on: target).Однако взгляните на мой код, и вы увидите, что я сделал «целевой» текст дочерним элементом внутри элемента и изначально скрыл это.

При наведении указателя мыши целевой текст размещается как « absolute » под «описанием» и отображением : блок »ed. Это в основном все, что нужно сделать. Маленькая маленькая уловка, ванильный CSS и не требуется Javascript …

И … ваша структура «

• » останется нетронутой.

  Когда я зацикливаюсь на чем-то, я всегда отслеживаю и упрощаю.

  Обновление 1:

  Если вам нужен «целевой» текст внутри поля «Описание», просто увеличьте высоту этого поля, и он будет помещен поверх него, когда вы добавите z-index: 1 к классу .target . ..

  Обновление 2:

  Выполните поиск по запросу «css stacking context», чтобы узнать о z-index и о том, как «наложить» свои документы на слои.

    a {
    текстовое оформление: нет;
  }
  a: link, a: посещено {
    цвет: # 3ea500;
  }
  a: hover {
    цвет: # cc7400;
    font-weight: 700;
  }
  .desc {
    цвет фона: зеленый;
    ширина: 33%;
    положение: фиксированное;
    радиус границы: 5 пикселей;
    осталось: 66%;
    верх: 180 пикселей; height: 38px / * обновление * /
  }
  
  а> .target {дисплей: нет; z-index: 1 / * обновление * /}
  а: наведите указатель> .target {дисплей: блок; позиция: абсолютная; осталось: 66%; верх: 199 пикселей; цвет: черный}  

    
  
      
    Генератор Deepdream. здравствуйте   
      
    Picture Breeder  привет, два   
      
    ИИ угадывает, что вы рисуете  привет три   
  
  
   Описание 
    

  Альтернативный вариант: , кроме ссылки, которую вы уже пробовали: если вам не нравится в вашем , сделайте «целевые» элементы также

• внутри < ul> у вас уже есть.Сначала скройте их и поместите в другое место, когда его «выбор» наведен.

  Тот же результат, немного другой код:

    a {
    текстовое оформление: нет;
  }
  a: link, a: посещено {
    цвет: # 3ea500;
  }
  a: hover {
    цвет: # cc7400;
    font-weight: 700;
  }
  a: hover {
    цвет: # cc7400;
    font-weight: 700;
  }
  .desc {
    цвет фона: зеленый;
    ширина: 33%;
    положение: фиксированное;
    радиус границы: 5 пикселей;
    осталось: 66%;
    верх: 180 пикселей;
    height: 38px / * добавить * /
  }
  
  .цель {дисплей: нет; z-index: 1}
  li: hover + .target {дисплей: блок; позиция: абсолютная; осталось: 66%; верх: 199 пикселей; цвет: черный}  

    
  
      
    Генератор Deepdream.  
      
   здравствуйте 
      
    Picture Breeder  
      
   привет двое 
      
    ИИ угадывает, что вы рисуете  
      
   здравствуйте, три 
  
  
   Описание 
    

  : hover — CSS: каскадные таблицы стилей

  Псевдокласс : hover CSS совпадает, когда пользователь взаимодействует с элементом с помощью указывающего устройства, но не обязательно активирует его.Обычно он срабатывает, когда пользователь наводит курсор на элемент (указатель мыши).

   
  a: hover {
    оранжевый цвет;
  }  

  Стили, определенные псевдоклассом : hover , будут переопределены любым последующим псевдоклассом, связанным со ссылками (: ссылка , : посещенный или : активный ), который имеет, по крайней мере, такую ​​же специфичность. Чтобы правильно оформить ссылки, поместите правило : hover после правил : ссылка и : посещено , но до правила : active , как определено в LVHA-order : : link — : посещено — : наведите курсор на — : активно .

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

  Базовый пример

  HTML

     Попробуйте навести указатель мыши на эту ссылку.  

  CSS

    a {
    цвет фона: голубой пудра;
    переход: цвет фона .5s;
  }
  
  a: hover {
    цвет фона: золото;
  }  

  Результат

  Галерея изображений

  Псевдокласс : hover можно использовать для создания галереи изображений с полноразмерными изображениями, которые отображаются только при наведении указателя мыши на эскиз. Смотрите эту демонстрацию для возможной подсказки.

  Примечание: Для аналогичного эффекта, но на основе псевдокласса : checked (применяется к скрытым радиобоксам), см. Эту демонстрацию, взятую со справочной страницы: checked.

  Таблицы BCD загружаются только в браузере

  Как изменить изображение при наведении курсора с помощью CSS

  Тема: HTML / CSSPrev | След.

  Ответ: Используйте CSS

  background-image свойство

  Вы можете просто использовать свойство CSS background-image в сочетании с псевдоклассом : hover для замены или изменения изображения при наведении курсора мыши.

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

    
  
  
  
  
  <стиль>
      .карта {
          ширина: 130 пикселей;
          высота: 195 пикселей;
          фон: url ("images / card-back.jpg") no-repeat;
          дисплей: встроенный блок;
      }
      .card: hover {
          фон: url ("images / card-front.jpg") no-repeat;
      }
  
  
  
      
   
   
    

  Вы также можете объединить изображения в спрайт изображения для плавного эффекта наведения. Однако, если вы хотите добиться этого эффекта с помощью тега , вы можете использовать метод позиционирования CSS, например:

    
  
  
  
  
  <стиль>
      .карта {
          ширина: 130 пикселей;
          высота: 195 пикселей;
          положение: относительное;
          дисплей: встроенный блок;
      }
      .card .img-top {
          дисплей: нет;
          позиция: абсолютная;
          верх: 0;
          слева: 0;
          z-индекс: 99;
      }
      .card: hover .img-top {
          дисплей: встроенный;
      }
  
  
  
      
  
          
          
      
  
    

  ---

  Связанные вопросы и ответы

  Вот еще несколько часто задаваемых вопросов по этой теме:

  Как изменить курсор при наведении курсора в CSS

  Почти все веб-сайты меняют курсоры для удобства пользователей или просто для развлечения.Настройка курсоров — это простой способ при необходимости придать сайту изюминку.

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

  Мы рассмотрим следующие способы управления удобством использования курсора:

  Как сделать курсор рукой, когда пользователь наводит курсор на элемент списка¶

  Если вы хотите превратить указатель мыши в указатель руки при наведении курсора на список item, вы можете установить класс для своего элемента списка (

• ) и определить стиль только для него.Но если вы хотите иметь указатель в виде руки для всех элементов вашего списка, просто установите стиль для элемента
• .

  Теперь давайте рассмотрим пример изменения указателя мыши на указатель руки с помощью значения «указатель» свойства cursor . Мы устанавливаем этот тип курсора только для класса «указатель».

  Пример замены указателя мыши на указатель руки: ¶

    
  
    
      
      <стиль>
        li {
          нижнее поле: 15 пикселей;
        }
        li.указатель {
          курсор: указатель;
        }
        li: hover {
          цвет фона: #ccc;
        }
      
    
    
       
   Наведите указатель мыши на элементы списка, чтобы увидеть, как курсор по умолчанию превращается в указатель: 
   
      
  
        
   Элемент списка 1 с курсором по умолчанию. 
        
   Элемент списка 2 с курсором-указателем. 
        
   Еще один элемент списка с курсором мыши по умолчанию.
      
    
    

  Попробуйте сами »

  Результат

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

  • Элемент списка 1 с курсором по умолчанию.
  • Элемент списка 2 с курсором-указателем.
  • Другой элемент списка с курсором мыши по умолчанию.

  В следующем примере используется селектор: nth-child. Здесь мы используем nth-child (odd) для курсора: progress; и nth-child (even) для cursor: pointer; иметь отдельные типы курсоров для разных элементов списка.

  Пример использования указателя и курсоров выполнения: ¶

    
  
    
      
      <стиль>
        li: nth-child (odd) {
          фон: # 1c87c9;
          курсор: прогресс;
          ширина: 50%;
          отступ: 5 пикселей;
        }
        li: nth-child (even) {
          фон: #ccc;
          курсор: указатель;
          ширина: 50%;
          отступ: 5 пикселей;
        }
      
    
    
      
   Наведите указатель мыши на элементы списка, чтобы увидеть, как изменяется курсор: 
      
  
        
   Элемент списка 1 
        
   Элемент списка 2 
        
   Элемент списка 3 
        
   Элемент списка 4 
        
   Элемент списка 5 
        
   Элемент списка 6 
        
   Элемент списка 7 
      
    
    

  Попробуйте сами »

  Как изменить курсор гиперссылки при наведении курсора¶

  Курсором по умолчанию для гиперссылки является« указатель ».Чтобы изменить его, вам нужно указать тип курсора для вашего элемента с помощью селектора CSS: hover. В нашем примере мы стилизуем только класс «ссылка».

  Пример изменения «указателя» на «по умолчанию»: ¶

    
  
    
      
      <стиль>
        .link: hover {
          курсор: по умолчанию;
        }
      
    
    
      
  
        Наведите указатель мыши на гиперссылку, чтобы увидеть, как «указатель» изменится на «по умолчанию»:
      
      
  
         W3docs 
        ссылка с исходным типом "указатель".
      
      
  
         W3docs 
        ссылка с измененным типом курсора "по умолчанию".
      
    
    

  Попробуйте сами »

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

  Пример использования типа курсора «захват» на гиперссылке: ¶

    
  
    
      
      <стиль>
        a {
          курсор: захватить;
        }
      
    
    
      
        6203def268a0df2a5fd545.png" alt = "logo" />   

  Попробуйте сами »

  Как применить собственный эффект изображения курсора к элементу¶

  Давайте повеселимся с курсорами! Можно добавить изображение в качестве курсора на вашу веб-страницу. Вам просто нужно добавить свое изображение, указав его URL-адрес в качестве значения свойства cursor .

  Не забудьте установить тип курсора, чтобы он показывал, когда браузер не может использовать предоставленное изображение. В противном случае ваш код не будет работать.

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

  Пример добавления изображения в качестве курсора: ¶

    
  
    
      
      <стиль>
        тело {
          фон: #eee;
          выравнивание текста: центр;
        }
        кнопка {
          дисплей: встроенный блок;
          цвет фона: # 1c87c9;
          цвет: #eee;
          маржа: 25 пикселей;
          положение: относительное;
          ширина: 140 пикселей;
          высота: 45 пикселей;
          радиус границы: 3 пикселя;
          граница: нет;
          размер шрифта: 1.5em;
          выравнивание текста: центр;
          текстовое оформление: нет;
          box-shadow: 0 2px 8px 0 # 999;
        }
        button: hover {
          цвет фона: # 999;
          цвет: # ffcc00;
        }
        #счастливый {
          курсор: url ("/ uploads / media / default / 0001/02 / ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), авто;
        }
        #грустный {
          курсор: url ("/ uploads / media / default / 0001/02 / 38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto;
        }
        #любовь {
          курсор: url ("/ uploads / media / default / 0001/02 / 4be757cf6e9ffc865861649ca423654484ad3dc1.png "), авто;
        }
      
    
    
       
   Какое у вас впечатление о нашем веб-сайте? 
   
       Счастливы 
       Грустно 
       Любовь 
    
    

  Попробуйте сами »

  Пример использования значков в качестве курсора: ¶

    
  
    
      
      <стиль>
        тело {
          ширина: 600 пикселей;
          маржа: 0.5эм авто;
        }
        img {
          ширина: 280 пикселей;
          высота: 186 пикселей;
          маржа: 5 пикселей;
          дисплей: встроенный блок;
          фоновая позиция: 50% 50%;
        }
        .собака {
          курсор: url ("/ uploads / media / default / 0001/02 / 53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto;
        }
        .cactus {
          курсор: url ("/ uploads / media / default / 0001/02 / ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), авто;
        }
        .природа {
          курсор: url ("/ uploads / media / default / 0001/02 / edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), авто;
        }
        .жилой дом {
          курсор: url ("/ uploads / media / default / 0001/02 / bb6f118f3b06838624b4297992457093f40fd92b.png"), auto;
        }
      
    
    
      
      
      
      
    
    

  Попробуйте сами »

  Вы также можете использовать значки с веб-сайтов, где предоставляется код Base64, просто вставив код Base64 в значение URL-адреса курсора. Или загрузите значок на свой веб-сайт и используйте URL-адрес для установки курсора.

  Пример всех типов курсоров¶

  Вот пример, который содержит все возможные типы, которые может иметь курсор.

  Для значений «приближение», «уменьшение», «захват» и «захват» добавлено расширение свойства -webkit-.

  Пример использования всех типов курсоров: ¶

    
  
    
      
      <стиль>
        тело {
          выравнивание текста: центр;
          семейство шрифтов: Roboto, Helvetica, Arial, sans-serif;
        }
        .cursor {
          дисплей: гибкий;
          flex-wrap: обертка;
        }
        .cursor> div {
          гибкость: 120 пикселей;
          отступ: 10px 2px;
          белое пространство: nowrap;
          граница: 1px solid # 666;
          радиус границы: 5 пикселей;
          маржа: 0 5px 5px 0;
        }
        .cursor> div: hover {
          фон: # 1c87c9;
        }
        .auto {
          курсор: авто;
        }
        .По умолчанию {
          курсор: по умолчанию;
        }
        .никто {
          курсор: нет;
        }
        .контекстное меню {
          курсор: контекстное меню;
        }
        .помощь {
          курсор: справка;
        }
        .pointer {
          курсор: указатель;
        }
        .прогресс {
          курсор: прогресс;
        }
        .ждать {
          курсор: ждать;
        }
        .клетка {
          курсор: ячейка;
        }
        .crosshair {
          курсор: перекрестие;
        }
        .text {
          курсор: текст;
        }
        .vertical-text {
          курсор: вертикальный текст;
        }
        .alias {
          курсор: псевдоним;
        }
        .copy {
          курсор: копировать;
        }
        .двигаться {
          курсор: двигаться;
        }
        .no-drop {
          курсор: без капель;
        }
        .не допускается {
          курсор: не допускается;
        }
        .all-scroll {
          курсор: all-scroll;
        }
        .col-resize {
          курсор: col-resize;
        }
        .row-resize {
          курсор: изменение размера строки;
        }
        .n-resize {
          курсор: n-изменить размер;
        }
        .e-resize {
          курсор: изменить размер;
        }
        .s-resize {
          курсор: s-изменить размер;
        }
        .w-resize {
          курсор: w-изменение размера;
        }
        .ns-resize {
          курсор: ns-resize;
        }
        .ew-resize {
          курсор: ew-resize;
        }
        .ne-resize {
          курсор: изменить размер;
        }
        .nw-resize {
          курсор: nw-resize;
        }
        .se-resize {
          курсор: изменить размер;
        }
        .sw-resize {
          курсор: sw-resize;
        }
        .nesw-resize {
          курсор: nesw-resize;
        }
        .nwse-resize {
          курсор: nwse-resize;
        }
        .схватить {
          курсор: -webkit-grab;
          курсор: захватить;
        }
        .grabbing {
          курсор: -webkit-grabbing;
          курсор: захватывающий;
        }
        .увеличить {
          курсор: -webkit-zoom-in;
          курсор: увеличение;
        }
        .уменьшить {
          курсор: -webkit-zoom-out;
          курсор: уменьшение масштаба;
        }
      
    
    
       
   Пример свойства курсора 
   
      
   Наведите курсор мыши на элемент, чтобы увидеть изменения: 
      
  
        
   авто 
        
   по умолчанию 
        
   нет 
        
   контекстное меню 
        
   справка 
        
   указатель 
        
   прогресс 
        
   подождите 
        
   ячейка 
        
   перекрестие 
        
   текст 
        
   вертикальный текст 
        
   псевдоним 
        
   копия 
        
   переместить 
        
   без капли 
        
   не разрешено 
        
   all-scroll 
        
   col-resize 
        
   изменение размера строки 
        
   n-изменить размер 
        
   s-изменить размер 
        
   изменить размер 
        
   w-изменение размера 
        
   ns-resize 
        
   ew-resize 
        
   изменить размер 
        
   изменение размера nw 
        
   изменить размер 
        
   sw-resize 
        
   новое изменение размера 
        
   изменение размера nwse 
        
   взять 
        
   захват 
        
   увеличение 
        
   уменьшение 
      
    
    

  Попробуйте сами »

  Как изменить цвета значков и фона при наведении курсора

  Подпишитесь на информационный бюллетень нашего блога.

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

  Гиперссылки — самые фундаментальные строительные блоки сети. Это элементы, с которыми люди взаимодействуют больше всего. Раньше для обозначения ссылок использовался только текст и синий цвет. В современном веб-дизайне мы можем быть более креативными при разработке ссылок, например, с использованием значков, но мы должны гарантировать, что удобство использования ссылок не пострадает.При разработке ссылок на значки мы должны сделать очевидным, что они интерактивны. Использование эффектов наведения для изменения цвета значка и фона — хороший способ указать, что на них можно нажимать.

  В этом уроке мы используем значки FontAwesome. Иконочные шрифты идеально подходят для работы, когда вы хотите легко изменить цвета ссылок. Все, что вам нужно сделать, это изменить свойство color в вашем файле CSS. Если вы используете SVG вместо FontAwesome, вы можете легко изменить цвет с помощью свойства fill .Для файлов изображений PNG и JPEG вам необходимо предоставить два набора изображений с разными цветами для каждого значка, один для обычного состояния и один для состояния наведения. Вот почему ссылки с использованием шрифтов значков и изображений SVG намного практичнее:

  // Пример изменения цвета шрифта иконки .икона { цвет: # 000; } .icon: hover { цвет: #fff } // Пример изменения цвета иконки SVG .икона { заполнить: # 000; } .icon: hover { заполнить: #fff }

  Поскольку мы не используем теги a для ссылок и вместо этого полагаемся на функцию Javascript onclick , нам также необходимо указывать ссылки, изменяя курсор.Это особенно важно для дальтоников, поскольку они не умеют различать цвета, им нужны другие индикаторы для ссылок. Нам нужно установить курсор на указатель , чтобы при наведении курсора на ссылку курсор изменился со стрелки на руку, давая понять, что элемент является интерактивным.

  .ct-icon-box .ct-icon-box { курсор: указатель; }

  Внешние ссылки

  Начнем с включения необходимых ссылок на источники Bootstrap и FontAwesome в файл HTML:

  HTML

  Ниже у нас есть код для контейнера Bootstrap с тремя ссылками. Замените # в атрибуте onclick на адрес ссылки, который вы хотите поместить.Скопируйте и вставьте приведенный ниже код и не стесняйтесь настраивать макет и количество ссылок по своему усмотрению:

  <я aria-hidden = "true">

  Новости

  <я aria-hidden = "true">

  События

  <я aria-hidden = "true">

  Галерея

  Обратите внимание, что у нас есть значок и описательный заголовок с тегом h4 под значком для каждой ссылки.Это связано с тем, что значки сами по себе могут быть недостаточно описательными для пользователей, поэтому мы также предоставляем текст, чтобы прояснить, о чем ссылка. Согласно группе Nielsen Norman, значки нуждаются в текстовой метке, чтобы прояснить их значение.

  CSS

  Вот полный код CSS. У нас есть div с именем класса .ct-icon-box , который содержит все поля значков. Каждое поле значка в div с именем класса .ct-icon-box . Нам не нужно отдельно выбирать значки и заголовки, чтобы задать их цвет.Мы просто выбираем элемент .ct-icon-box , и когда мы даем ему значение цвета, он устанавливает это значение как для значка, так и для цвета заголовка:

  .ct-icon-box .ct-icon-box { padding-top: 8 пикселей; ширина: 50%; плыть налево; положение: относительное; граница: 2px solid #ccc; минимальная высота: 267 пикселей; дисплей: встроенная таблица; выравнивание текста: центр; цвет: # 292929; нижнее поле: -2 пикселя; курсор: указатель; } .ct-icon-box: hover { фон: # d60e96; цвет: #fff; } .ct-icon-box { маржа: 65 пикселей авто; максимальная ширина: 525 пикселей; перелив: авто; ясно: оба; } .ct-icon-box .ct-icon-box__header { размер шрифта: 22 пикселя; преобразование текста: прописные буквы; } section h4 { font-weight: 600; межбуквенный интервал: 0,5 пикселя; } .ct-icon-box .ct-icon-box.bottom-all { ширина: 99.5%; минимальная высота: 250 пикселей; нижнее поле: 2 пикселя; } @media only screen и (min-width: 480px) { .ct-icon-box .ct-icon-box.top-right, .ct-icon-box .ct-icon-box.bottom-right { маржа слева: -2px; } } .ct-icon-box .ct-icon-box> .ct-icon-box .ct-icon-box__inner, .ct-icon-box .ct-icon-box> .inner { дисплей: таблица-ячейка; ширина: 100%; вертикальное выравнивание: по центру; } .container { маржа: 0 авто; }

  А вот и готовые ссылки на иконку. Наведите указатель мыши на поля со значками, чтобы увидеть эффект наведения:

  Как создать эффект наведения курсора на список ссылок

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

  Вместо того, чтобы заставлять других пробираться через CSS Верле (вау, это настоящая таблица стилей!), Я подумал, что было бы полезно показать, как создать этот эффект «наведения блока».

  Эффект наведения ссылки в блоге Верле

  Пример

  Во-первых, просмотрите мой пример эффекта наведения ссылки и пролистайте элементы списка, чтобы увидеть эффект наведения блока в действии.

  Код

  HTML довольно прост. Поскольку IE поддерживает только элемент : hover для ссылок, привязка ссылки должна обходить весь текст в элементе списка.

  Следовательно, нам нужно предоставить несколько дополнительных ловушек для стилизации контента. Мы делаем это с помощью тегов и .

    & lt; div & gt;
  & lt; ul & gt;
  & lt; li & gt; & lt; a title = "Text" href = "#" & gt; Первый заголовок ссылки
  & lt; em & gt; Описание ссылки. & lt; / em & gt;
  Дата публикации & lt; / a & gt; & lt; / li & gt;
  & lt; li & gt; & lt; a title = "Text" href = "#" & gt; Первый заголовок ссылки
  & lt; em & gt; Описание ссылки. & lt; / em & gt;
  Дата публикации & lt; / a & gt; & lt; / li & gt;
  & lt; / ul & gt;
  & lt; / div & gt;  

  А теперь CSS. Чтобы эффект наведения блока работал правильно в IE, нам нужно сделать ширину ссылки такой же, как у элемента списка.

  В противном случае эффект наведения будет отображаться только при наведении указателя мыши на текст внутри элемента списка.

   #links ul {
  тип-стиль-список: нет;
  ширина: 400 пикселей;
  }
  #links li {
  граница: 1px с точками # 999;
  ширина границы: 1px 0;
  маржа: 5px 0;
  }
  #links li a {
  цвет: # 9
  ;
  дисплей: блок;
  шрифт: полужирный, 120%, Arial, Helvetica, без засечек;
  отступ: 5 пикселей;
  текстовое оформление: нет;
  }
  * html #links li a {/ * заставить работать эффект наведения в IE * /
  ширина: 400 пикселей;
  }
  #links li a: hover {
  фон: #ffffcc;
  }
  #links a em {
  цвет: # 333;
  дисплей: блок;
  шрифт: обычный 85% Verdana, Helvetica, без засечек;
  высота строки: 125%;
  }
  #links a span {
  цвет: # 125F15;
  шрифт: обычный 70% Verdana, Helvetica, без засечек;
  высота строки: 150%;
  } 

  Это не обязательно самая семантическая разметка в мире, особенно с этими тегами , но я не знаю, как еще вы бы это сделали.