Показать сообщение отдельно
  #5 (permalink)  
Старый 20.11.2015, 14:16
Новичок на форуме
Отправить личное сообщение для ur5fit Посмотреть профиль Найти все сообщения от ur5fit
 
Регистрация: 19.11.2015
Сообщений: 5

да суть такая (подсмотрена в WordPress) : у нас есть элементы у которых прописаны атрибуты data-click='click' или data-dblclick='dblclick'или data-hover='hover' , если произошло событие click, dblclick, hover то доставляется класс BODY за писаный в атрибуте соответствующему событию. мы пишем :
<div data-click='click'>data-click='click'</div>
<div data-dblclick='dblclick'>data-dblclick='dblclick'</div>
 <div data-hover='hover'>data-hover='hover'</div>

<div class="class1">click</div>
<div class="class2">dblclick</div>
<div class="class3">hover</div>

.click .class1{ 
    margin-top: 0px;
    opacity: 1;
}
.dblclick .class2{
    top: 100px;
}
.hover .class3{
    height: 100px;
    width: 100px;
    background: fuchsia;
    border-radius: 50%;
}


в атрибуты мы можем записывать любые классы
можно управлять группой элементов так:
.click .class1,  .class2, .class3, .class4, .class5{ 
    margin-top: 0px;
    opacity: 1;
}


или только некоторыми делать все что позволяет css

вот три спойлера -- три ссылки каждая открывает свой div - можно? (но тут нужно будет отменить переход по ссылке)
<a data-click='spoiler1' href='#'>spoiler1</a>
<a  data-click='spoiler2' href='#'>spoiler2</a>
 <a  data-click='spoiler3' href='#'>spoiler3</a>

<div class="class1">spoiler1 open</div>
<div class="class2">spoiler2 open</div>
<div class="class3">spoiler3 open</div>

.class1{ 
    display: none;
}
spoiler1 .class1  { 
    display: block;
}
 .class2{ 
    display: none;
}
spoiler1 .class2  { 
    display: block;
}
 .class3{ 
    display: none;
}
spoiler1 .class3  { 
    display: block;
}

Последний раз редактировалось ur5fit, 20.11.2015 в 17:43.
Ответить с цитированием