меню

Что такое связывание объектов? Это создание события, которое отражается на другом объекте на веб-странице. При этом событие может отражаться также и на первом объекте. Для создания достаточно использовать только 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 внутри ссылки задано относительное расположение и координаты верха, низа, лева, права. Благодаря этому все остается внутри одного элемента ссылки и поэтому наведение на один из объектов автоматически срабатывает на обоих элементах.

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


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

Как отключить преобразование телефонных номеров в ссылки в мобильных браузерах

Браузер для BlackBerry, Android и Safari для IOS (iPhone / IPod / IPad) автоматически обнаруживает телефонные номера и адреса электронной почты на веб страницах и преобразует их в ссылки. Если вам это не надо, используйте следующие мета-теги. Для Safari (iPhone…Подробнее »

Треугольники по средствам CSS

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

17 CSS/HTML эффектов с кроссбраузерными решениями

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

Красивая форма обратной связи на чистом CSS

В данной статье мы расскажем Вам, как разработать красивую контактную форму на чистом CSS без использования изображений. Форма будет иметь поля со следующими данными: имя, адрес электронной почты, URL-адрес, тема и текст сообщения.

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

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

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

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

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

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

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