Question

Доброго дня!

Колдую над шаблоном - прошу помочь.

Добавляю контактную кнопку почты по типу телефона - все замечательно получается кроме одного.

Она не подсвечивается как телефонная :(

Соответственно и изменена стандартная картинка

 

Использовал следующие коды

По примеру телефона

В нижнем глобальном контейнере

<div id="phone-box">

<span class="tool-ico tool-ph" title="Позвоните нам"><span></span></span>

<span class="tool-txt">+7 (909) 411-3-888</span>

</div>

добавил

<div id="mail-box">

<span class="tool-ico tool-ma" title="Напишите нам"><span><a href="mailto:zakaz@unimag161.ru"></a></span></span>

<span class="tool-txt">zakaz@unimag161.ru</span>

</div>

В 1.CSS

a:hover,#shop-basket .hover,#phone-box .hover,#mail-box .hover {color:#be4041;}

в таблице стилей шаблона

.tool-ma span {background-position:0 -384px;}

.tool-ma.hover span {background-position:0 -416px;}

#mail-box {height:30px;float:right;padding:0 10px 0 0;}

 

Чего не хватает?

Answer 1

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

Comments

Юрий, можете подсказать конкретнее! Дело в том что сейчас добавил кнопку одноклассники - она как раз работает :) - но там я код не правил а просто добавил по примеру... Что-то упускаю. За ранее благо..дарю!

---

Сейчас да, иконку вижу и для почты, найдите в стилях строку номер 183:

.tool-ma.hover span {background-position:0 -416px;}

замените на:

.tool-ma:hover span {background-position:0 -416px;background-color:#be4041!important;border-color:#fff;}

должно помочь.

---

Юрий спасибо большое - действительно подсветилась при наведении... Есть правда непонятка... Края кнопки не закрашиваются... И по идеи настройки цвета спрятаны шаблоном в http://unimag161.ru/css/1.css

Подскажете как что подправить?

Если конечно не сложно :)

---

после этой строки, что вы добавили, как я писал выше, добавьте еще:

.tool-ico:hover {background-color:#be4041;}

---

Юрий, а текст по тому же принципу

• .tool-txt:hover {color:#be4041;}

 и он подкрашивается но как самостоятельный элемент :( (а хотелось бы их связать, чтобы подствечивались они оба при навденеии на любой из них)

---

Понимаю, что хочется, но искать в вашей таблице стилей ошибки, это долгое дело, если не нравится, что я советовал выше, обратитесь к фрилансерам, пусть сделают все за вас.