Изменение нескольких стилей

[LaGeneral]

Уважаемые знатоки столкнулся вот с такой проблемой:
Допустим есть элемент (в моем случае изображение) и текст привязанный к нему. Как сделать так тобы при наведении на текст изображение меняло цвет на "цвет1", а при наведении на изображение на "цвет2". Глаз уже замылен не могу найти или что-то упускаю...

HTML

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

По идеи все стили (в том числе цветовая часть) прописаны в отдельном CSS (можно скачать)

основная часть прописана тут CSS ниже выписка из нее:

#mail-box a:hover .tool-ico {background-color:#be4041;} #mail-box a:hover .tool-txt {color:#be4041;}#mail-box a:hover .tool-ico span {background-position:0 -416px;background-color:#be4041!important;border-color:#fff;z-index:9999;}#site-tools {position:fixed;background:#363636;height:30px;top:0px;left:0px;;width:100%;z-index:99999;}#site-tools .wrapper {padding:0;}.tool-ico {float:left;display:block;position:relative;top:5px;z-index:1500;height:36px;width:36px;padding:2px;background:#363636;border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px;}.tool-ico span {display:block;height:32px;width:32px;border:2px solid #777;white-space:nowrap;text-indent:100%;overflow:hidden;cursor:pointer;background:url(/img/tools.png) center 0 no-repeat;border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px;}.tool-ico a {display:block;height:32px;width:32px;}.tool-ph span {background-position:0 -64px;}.tool-vk span {background-position:0 -128px;}.tool-fb span {background-position:0 -192px;}.tool-tw span {background-position:0 -256px;}.tool-rs span {background-position:0 -320px;}.tool-ma span {background-position:0 -384px;}.tool-ok span {background-position:0 -448px;}.tool-ico.hover span {background-position:center -32px;border-color:#fff;}.tool-ph.hover span {background-position:0 -96px;}.tool-vk.hover span {background-position:0 -160px;}.tool-fb.hover span {background-position:0 -224px;}.tool-tw.hover span {background-position:0 -288px;}.tool-rs.hover span {background-position:0 -352px;}.tool-ma:hover span {background-position:0 -416px;}.tool-ok.hover span {background-position:0 -480px;}.tool-ico:hover {background-color:#be4041;}#cart-box {height:30px;float:left;width:320px;cursor:pointer;}#shop-basket {height:30px;}.tool-txt {float:left;display:block;height:30px;line-height:30px;padding:0 0 0 10px;font-size:16px;font-family:'HighTech';color:#777;}.goods-list .wait {background:url(/img/wait.gif) center center no-repeat;}#goods_cont .myWinLoad {background:url(/img/wait3.gif);width:32px;height:32px;}#shop-basket ul {margin:0;padding:0;text-align:left;list-style:none}#shop-basket li {border-bottom:1px dotted #444;border-right:1px dotted #444;float:left;width:223px;padding:10px;}#shop-basket li.cart-item-1,#shop-basket li.cart-item-2,#shop-basket li.cart-item-3,#shop-basket li.cart-item-4 {border-bottom:1px dotted #444;}#shop-basket li.cart-row {border-left:1px dotted #444!important;}#shop-basket .sb-name {padding-right:15px;font-weight:bold;}#shop-basket .sb-cost {padding-right:15px;color:#999;font-size:11px;}#shop-basket .sb-func {float:right;cursor:pointer;width:16px;height:16px;margin:0;border:1px solid #777;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}#shop-basket a.remove {background:url(/img/del.png) 3px 0;}#shop-basket a.remove:hover {background:url(/img/del.png) 3px -16px;border-color:#e03923;}#shop-basket .myWinLoad,#shop-basket .myWinLoadS,#shop-basket .myWinGrid {display:none!important;}#cart-content {display:none;cursor:default;position:absolute;z-index:1000;width:980px;padding:10px 10px 20px 10px;top:30px;left:0;background:#191919;color:#ddd;-webkit-border-bottom-left-radius:3px;-webkit-border-bottom-right-radius:3px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;}.cart-sum {padding:0 0 0 10px;}.cart-links {padding:0 0 10px 40px;text-align:left;}.cart-links a {padding:4px 10px;color:#fff!important;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px;font-family:'HighTech';text-decoration:none;}.basket-img {width:217px;padding:2px;background:#111;border:1px solid #444;}.basket-item {width:223px;padding:5px 0 0 0;}#phone-box {height:30px;float:right;padding:0 10px 0 0;}#mail-box {height:30px;float:right;padding:0 10px 0 0;}

Пример страниц

Подскажите что и как

за ранее Благо..дарю.

[wwt]

  On 7/17/2015 at 6:00 PM, LaGeneral said:

 

  On 7/17/2015 at 5:00 PM, wwt said:

http://jsfiddle.net/868qo8rr/

Видимо я чего-то не понял - но в вашем примере при наведенеии на надпись картинка не подкрашивается в другой цвет...

Необходимо чтобы было 2 эффекта:

1 - при наведении на текст - подкрашивается и текст и картинка в ЦВЕТ1

2 - при наведении на картинку - подкрашивается текст в ЦВЕТ1, картинка подкрашивается в ЦВЕТ2

 

 

Не нужно из нас делать идиотов, я вам дал пример того что вы просили, а именно, цитирую:

  Quote

 

Как сделать так тобы при наведении на текст изображение меняло цвет на "цвет1", а при наведении на изображение на "цвет2".

Поменяйте местами a  и img  и получите желаемое. Если у вас даже на это не хватило ума, то не стоит вообще говорить о профессионализме других людей. Я не претендую, а вы тем более не должны.

 

Поменять местами вот так : http://jsfiddle.net/868qo8rr/1/

 

А по второму вашему условию вот: http://jsfiddle.net/868qo8rr/2/

[wwt]

http://jsfiddle.net/868qo8rr/

[LaGeneral]

  On 7/17/2015 at 5:00 PM, wwt said:

http://jsfiddle.net/868qo8rr/

Видимо я чего-то не понял - но в вашем примере при наведенеии на надпись картинка не подкрашивается в другой цвет...

Необходимо чтобы было 2 эффекта:

1 - при наведении на текст - подкрашивается и текст и картинка в ЦВЕТ1

2 - при наведении на картинку - подкрашивается текст в ЦВЕТ1, картинка подкрашивается в ЦВЕТ2

[DivMan]

Прежде, чем работать с CMS, изучите HTML, CSS, JS, PHP, MySQL и не мучайтесь.

 

Это, то же самое, что и работать на камазе, который всё время ломается, ни разу не поработавшим слесарем. 

[LaGeneral]

  On 7/17/2015 at 6:04 PM, DivMan said:

Прежде, чем работать с CMS, изучите HTML, CSS, JS, PHP, MySQL и не мучайтесь.

 

Это, то же самое, что и работать на камазе, который всё время ломается, ни разу не поработавшим слесарем. 

Спасибо огромное... к сожалению ваш ответ мне не помог... Я был на столько уверен что попал в среду проффессионалов для которых этот вопрос словно семечки щелкать... Не думал что для вас это так сложно как для меня!

[DivMan]

выложите сайт на хостинг 

[LaGeneral]

  On 7/17/2015 at 6:13 PM, DivMan said:

выложите сайт на хостинг 

как это поможет решить вопрос с подсветкой области при наведении?

[DivMan]

решит сразу 

[LaGeneral]

  On 7/17/2015 at 6:36 PM, DivMan said:

решит сразу 

круто... а можно конкретизировать каким образом?

[DivMan]

hostinger 

[LaGeneral]

Огромное спасибо!!!!

[wwt]

  On 7/17/2015 at 8:27 PM, LaGeneral said:

Огромное спасибо!!!!

Да не за что, в следующий раз более понятно изъясняйтесь и никому не придется чувствовать себя не приятно =)