меню

Что такое связывание объектов? Это создание события, которое отражается на другом объекте на веб-странице. При этом событие может отражаться также и на первом объекте. Для создания достаточно использовать только CSS, так что это интересный и не ресурсоёмкий способ.

Как в CSS связывать объекты?

В нашем примере используется ряд цветных кругов и список их цветов ниже. При наведении на круг подсветятся и круг, и название его цвета. Также при наведении на название цвета подсветятся и круг, и название цвета.

Как в CSS связывать объекты?

При наведении на круг или на слово выделятся оба объекта.

Цвета располагаются в следующем порядке: красный, желтый, оранжевый, зеленый, синий.

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

 
<ul>
  <li id="red"><a href="#"><em>Red</em></a></li>
  <li id="yellow"><a href="#"><em>Yellow</em></a></li>
  <li id="orange"><a href="#"><em>Orange</em></a></li>
  <li id="green"><a href="#"><em>Green</em></a></li>
  <li id="blue"><a href="#"><em>Blue</em></a></li>
</ul>
 

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

 
ul li a {
 width: 100px;
 height: 100px;
 display: block;
}
ul li a em {
 position: relative;
}
ul li#red a {
 background: url(images/red.gif) bottom center no-repeat;
}
ul li#red a:hover {
 background-position: top center;
}
ul li#red a em {
 top: 150px;
}
 

Нужный эффект достигается благодаря тому, что элементу em внутри ссылки задано относительное расположение и координаты верха, низа, лева, права. Благодаря этому все остается внутри одного элемента ссылки и поэтому наведение на один из объектов автоматически срабатывает на обоих элементах.

Надеемся, вам показался интересным этот простой способ.


Возможно, вам будет интересно

Адаптивный CSS3 Manasory без JavaScript

Реализация адаптивных html-блоков с содержанием в виде кирпичной кладки Masonry, исключительно средствами CSS3 без JavaScript.

Медиа типы в CSS

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

Масштабирование в CSS средствами zoom и transform

Масштабировать элементы можно используя css свойство zoom. Cвойство CSS Zoom, поддерживается в IE 5.5+, Opera, Safari 4 и Chrome.

CSS прижать footer к низу окна браузера

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

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

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

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту