Ответить на тему  [ Сообщений: 6 ] 
Меню с разным по цвету подчеркивание 
Автор Сообщение
Опытный

Зарегистрирован: 05 сен 2011, 21:24
Сообщений: 329
Пол: женский
Репутация: 290
Добавить пункт репутацииВычесть пункт репутации
Сообщение Меню с разным по цвету подчеркивание
Добрый день ) Помогите разобаться с css. Есть меню, при наведении на ссылку меняется цвет ссылки и подчеркивание. Никак не могу сделать, чтобы у каждой ссылки был РАЗНЫЙ цвет ссылки и подчеркивание при наведении.
Вот код
<style>
.sti-menu{
width:1010px;
position:relative;
margin:20px auto 0 auto;
}
.sti-menu li{
float:left;
width:200px;
height:200px;
margin:1px;
list-style-type:none;
}
.sti-menu li a{
display:block;
overflow:hidden;
background:#fff;
text-align:center;
height:100%;
width:100%;
position:relative;
}
.sti-menu li a h2{
color:#000;
font-size:22px;
font-weight:600;
text-transform:uppercase;
position:absolute;
padding:1px;
width:180px;
top:20px;
}
.sti-menu li a:hover h2{
color: #ee3322;
font-size:22px;
font-weight:600;
text-transform:uppercase;
position:absolute;
padding:1px;
width:180px;
top:20px;
}
.sti-menu li a h3{
font-size:18px;
color: #000;
position:absolute;
top:48px;
width:180px;
}
.sti-menu li a:hover h3{
font-size:18px;
color: #111;
position:absolute;
top:48px;
width:180px;
border-bottom:2px solid #ee3322;
}
</style>

<ul id="sti-menu" class="sti-menu">
<li>
<a href="#">
<h2 class="sti-item">ссылка1</h2>
<h3 class="sti-item">текс1</h3>
</a>
</li>
<li><a href="#">
<h2 class="sti-item">ссылка2</h2>
<h3 class="sti-item">текс2</h3>
</a></li>
</ul>

прописывала каждой ссылке свой класс, типа #sti-menu .home li a h2{...} - не помогает

_________________
http://layf.info/ - информируйся и развлекайся


07 апр 2017, 16:51
Профиль Отправить личное сообщение WWW
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 957
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Меню с разным по цвету подчеркивание
Добрый вечер! :) Ну во первых уберите свойство "color" для всех элементов внутри ссылки и задайте цвет непосредственно тегу "a".
А во вторых добавьте этот код после ваших стилей:
Код:
   .sti-menu li:nth-child(1) a:hover {color: #1DE11D;} /*цвет текста*/
      .sti-menu li:nth-child(1) a:hover h3 {border-color: #1DE11D;} /*цвет подчеркивания*/
   .sti-menu li:nth-child(2) a:hover {color: #D74DFA;} /*цвет текста*/
      .sti-menu li:nth-child(2) a:hover h3 {border-color: #D74DFA;}/*цвет подчеркивания*/

Если что-то не получится, тогда выложу CSS-код полностью. Но я в Вас верю :wink:

_________________
Не всё валидно, что не видно.


07 апр 2017, 18:54
Профиль Отправить личное сообщение
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 957
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Меню с разным по цвету подчеркивание
Пока делать было нечего накидал для вас пример, как бы сделал я:
HTML
Код:
<ul id="sti-menu" class="sti-menu">
   <li>
      <a href="#">
         <strong>ссылка-1</strong>
         <span>текст-1</span>
      </a>
   </li>
   <li>
      <a href="#">
         <strong>ссылка-2</strong>
         <span>текст-2</span>
      </a>
   </li>
</ul>

CSS
Цитата:
body {background-color: rgba(123, 145, 255, .4);}
.sti-menu, .sti-menu * {box-sizing: border-box;}
.sti-menu {
margin: 20px auto 0;
list-style-type: none;
}
.sti-menu li {
display: inline-block;
width: 200px;
height: 200px;
}
.sti-menu li a {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
background: #fff;
color: #000;
text-decoration: none;
}
.sti-menu strong, .sti-menu span {
text-align: center;
}
.sti-menu strong {
font-size: 22px;
font-weight: 600;
text-transform: uppercase;
}
.sti-menu span {
font-size: 18px;
position: relative;
}
.sti-menu span:after {
content: '';
display: block;
position: absolute;
width: 85%;
height: 2px;
left: 0;
right: 0;
bottom: -6px;
margin-left: auto;
margin-right: auto;
}
.sti-menu li:nth-child(1) a:hover {color: #1DE11D;} /*цвет текста*/
.sti-menu li:nth-child(1) a:hover span:after {background-color: #1DE11D;;} /*цвет подчеркивания*/
.sti-menu li:nth-child(2) a:hover {color: #D74DFA;} /*цвет текста*/
.sti-menu li:nth-child(2) a:hover span:after {background-color: #D74DFA;}/*цвет подчеркивания*/

_________________
Не всё валидно, что не видно.


07 апр 2017, 21:35
Профиль Отправить личное сообщение
Модератор
Аватар пользователя

Зарегистрирован: 09 мар 2010, 00:53
Сообщений: 4093
Репутация: 2904
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Меню с разным по цвету подчеркивание
Если вместо "ссылка-1" понадобится написать что-нибудь подлиннее, например, "ссылка номер один", что получится?

_________________
Не забывайте отдыхать!
www.jscan.ru - ежедневно новые японские сканворды и судоку различной сложности!


07 апр 2017, 23:26
Профиль Отправить личное сообщение WWW
Профи

Зарегистрирован: 21 окт 2010, 15:36
Сообщений: 957
Откуда: Саратовская область, г.Энгельс
Пол: мужской
Репутация: 848
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Меню с разным по цвету подчеркивание
Поспешил выложить код и всё как следует не проверил. Спасибо Vladis за наводку :wink: Свои косяки исправил (надеюсь, что все) Выкладываю доработанный CSS:
Код:
body {background-color: rgba(123, 145, 255, .4);}
   .sti-menu, .sti-menu * {box-sizing: border-box;}
   .sti-menu {
      display: flex;
      margin: 20px auto 0;
      list-style-type: none;
      padding: 2px;
   }
   .sti-menu li {margin: 1px;}
   .sti-menu li a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 200px;
      height: 200px;
      background: #fff;
      color: #000;
      text-decoration: none;
   }
   .sti-menu strong, .sti-menu span {text-align: center;}
   .sti-menu strong {
      font-size: 22px;
      font-weight: 600;
      text-transform: uppercase;
   }
   .sti-menu span {
      font-size: 18px;
      position: relative;
   }
   .sti-menu span:after {
      content: '';
      display: block;
      position: absolute;
      width: 85%;
      height: 2px;
      left: 0;
      right: 0;
      bottom: -6px;
      margin-left: auto;
      margin-right: auto;
   }
   .sti-menu li:nth-child(1) a:hover {color: #1DE11D;} /*цвет текста*/
      .sti-menu li:nth-child(1) a:hover span:after {background-color: #1DE11D;;} /*цвет подчеркивания*/
   .sti-menu li:nth-child(2) a:hover {color: #D74DFA;} /*цвет текста*/
      .sti-menu li:nth-child(2) a:hover span:after {background-color: #D74DFA;}/*цвет подчеркивания*/

_________________
Не всё валидно, что не видно.


08 апр 2017, 11:37
Профиль Отправить личное сообщение
Опытный

Зарегистрирован: 05 сен 2011, 21:24
Сообщений: 329
Пол: женский
Репутация: 290
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Меню с разным по цвету подчеркивание
Приогромное спасибо))) То, что доктор прописал)))

_________________
http://layf.info/ - информируйся и развлекайся


08 апр 2017, 13:56
Профиль Отправить личное сообщение WWW
Показать сообщения за:  Сортировать по:  
Ответить на тему   [ Сообщений: 6 ] 
   Похожие темы   Автор   Ответов   Просмотров   Последнее сообщение 
Нет новых непрочитанных сообщений в этой теме Как привязать разные дизайны к разным страницам в Joomla

в форуме ШАБЛОНЫ И ВНЕШНЕЕ ОФОРМЛЕНИЕ JOOMLA

Андрей Галямов

4

1266

26 янв 2011, 14:53

Iris Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Привязка материала к разным категориям

в форуме ФОРМИРОВАНИЕ СТРУКТУРЫ САЙТА И ВОПРОСЫ ПО ФУНКЦИОНИРОВАНИЮ СТАНДАРТНОЙ СБОРКИ JOOMLA

sqwartl

4

1913

02 апр 2014, 01:24

Karatel Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Одинаковый контент по разным ссылкам

в форуме ВНУТРЕННЯЯ ОПТИМИЗАЦИЯ

nyesi

4

1028

30 янв 2010, 10:09

nyesi Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме как убрать подчеркивание у ссылки

в форуме HTML

voinsveta

5

1891

28 апр 2011, 16:34

olga9823 Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Как убрать подчеркивание из ссылки

[ На страницу: 1, 2 ]

в форуме CSS И ВЕРСТКА

илья

19

4488

08 мар 2009, 14:53

Kostay1611 Перейти к последнему сообщению


Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Перейти:  
 cron