Форум русской поддержки Joomla!® CMS
09.12.2016, 17:26:28 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Как задать :hover{ и :active { Для одной кнопки?

 (Прочитано 59 раз)
0 Пользователей и 1 Гость смотрят эту тему.
RicoID
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 36


« : 18.11.2016, 15:08:15 »

Прошу помощи!

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

Создал кнопку "добавить статью" в админке и вывел её в нужную позицию.

Указал ей css-класс "addbutton" в админке.

Открыл template.css

В самом низу прописал оформление для неё так:
.addbutton {
  color: white;
  text-decoration: none;
  padding: .8em 1em calc(.8em + 3px);
  border-radius: 3px;
  background: rgb(64,199,129);
  box-shadow: 0 -3px rgb(53,167,110) inset;
  transition: 0.2s;
  max-width: 50%; display: block; margin: 0 auto;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  text-align: center;
}

Теперь я хочу задать ей свой цвет, когда наводишь на неё мышку.
Нашел в template.css общие параметры, которые за это отвечают:
.nav > li > a:hover,
.nav > li > a:focus {
   text-decoration: none;
   background-color: #EEF3FC;
}

Но они для всех кнопок! А мне нужно прописать свои и только для кнопки addbutton.

Ей нужно добавить это:
a.addbutton:hover { background: rgb(53, 167, 110);
}
a.addbutton:active {
  background: rgb(33,147,90);
  box-shadow: 0 3px rgb(33,147,90) inset;
}

Вопрос. Куда это прописывать??

Пытался в template.css прописывать такое:
a.addbutton:hover { background: rgb(53, 167, 110);
}
a.addbutton:active {
  background: rgb(33,147,90);
  box-shadow: 0 3px rgb(33,147,90) inset;
}
Не помогло.Скорее всего это неправильно, поправьте меня.

Шаблон protostar.
Кнопка тут (http://shpargalkablog.ru/2012/04/css-knopki.html) Зелёная.
Записан
RicoID
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 36


« Ответ #1 : 18.11.2016, 16:28:37 »

В общем, вроде разобрался) Нужно в CSS вот так добавлять:

.nav> li > a.addbutton:hover {
       background: rgb(53, 167, 110);
       color: white;
}
.nav> li > a.addbutton:active {
       background: rgb(33,147,90);
       box-shadow: 0 3px rgb(33,147,90) inset;
}
Записан
ProtectYourSite
Осваиваюсь на форуме
***

Репутация: +9/-2
Offline Offline

Сообщений: 85



« Ответ #2 : 18.11.2016, 17:34:43 »

Эти строчки должны быть ниже в коде, чем глобально для всех кнопок, тогда будет переопределяться и работать.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet