Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Изменение нескольких стилей (Изменение при наведении мышью на текст+рисунок и рисунок)
Изменение нескольких стилей
lageneral7369
Сообщений: 13
Репутация: 0

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

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;}
Пример страниц
Подскажите что и как
за ранее Благо..дарю.

Игра по данным условиям вот: http://jsfiddle.net/868qo8rr/2/
Сама картинка вот (обращаю внимание что каждый второй белого цвета - поэтому тут сливается с фоном)
PtrPt
Сообщений: 87
Репутация: 33

Сообщение # 2 | 20:37:30
Здравствуйте, у меня сейчас нет возможности написать Вам рабочий код, но могу Вам посоветовать, что почитать. http://htmlbook.ru/samcss/kontekstnye-selektory.
Что-то вроде этого:
.text:hover .img {стили для изображения при наведении на текст}
lageneral7369
Сообщений: 13
Репутация: 0

Сообщение # 3 | 18:21:29
Цитата PtrPt ()
.text:hover .img {стили для изображения при наведении на текст}
спасибо - но что-то не выходит sad

Добавлено (20 Июл 2015, 18:21:29)
---------------------------------------------

Цитата PtrPt ()
.text:hover .img
Собственно можно поэкспериментировать - если поможете буду признателен.
PtrPt
Сообщений: 87
Репутация: 33

Сообщение # 4 | 19:30:54
lageneral7369, много сторчек в Вашем css поменял, поэтому вот целый кусок стилей, начиная со строки 168:

Код
.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 !important;}
#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;}
#mail-box a:hover .tool-ico {background: #9A3334;}  
#mail-box a:hover .tool-txt {color:#be4041;}
#mail-box a:hover .tool-ico span {background-position:0 -416px;border-color:#fff;z-index:9999;}

У меня в отладчике вроде бы всё работает.

Элегантный uCoz :)
lageneral7369
Сообщений: 13
Репутация: 0

Сообщение # 5 | 23:55:39
Цитата PtrPt ()
много сторчек в Вашем css поменял
PtrPt- огромное спасибо... все работает...Подскажи пожалуйста не знаешь почему в IE не все кнопочки видны? Собственно пожалуй единственный вопрос который остался smile
Прикрепления: 0148875.png(44Kb)
PtrPt
Сообщений: 87
Репутация: 33

Сообщение # 6 | 10:53:34
lageneral7369, кто его знает! "Откопал" у себя IE8, так там вообще этих кнопок нет - только серая полоска.

До того, как поправили кнопку e-mail, в IE всё остальное работало или нет? (Спрашиваю, потому что при решении проблемы пришлось передвинуть !important.)

По логике, всё дожно работать: при наведении скрипт добавляет класс hover, положение длинной картинки определяется стилями

Код
.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-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;}

Но у IE своя логика, которую я, честно говоря, не пытался понять.

Я бы попробовал Вам помочь, да как-то неохота IE обновлять.

Может быть, кто-нибудь ещё поможет?

Элегантный uCoz :)
lageneral7369
Сообщений: 13
Репутация: 0

Сообщение # 7 | 15:21:47
Цитата PtrPt ()
До того, как поправили кнопку e-mail, в IE всё остальное работало или нет?
В любом случае огромное спасибо... До этого тоже не работали кнопки в IE - просто как-то непонятно почему во всех браузерах нормально показывает а тут именно те кнопки что добавил сам он не показывает! smile Может есть какая-то ограниченность длинны картинки или количества элементов? получается я добавил их после... В общем засада конечно - с другой стороны кто сейчас им пользуется? smile
lageneral7369
Сообщений: 13
Репутация: 0

Сообщение # 8 | 15:27:13
в общем какие-то чудеса - только что поменял местами изображения телефона и ОК - и он показал телефон на месте ОК а ОК на месте телефона не показал - но при обратной перестановке показал все элементы smile
фиг его знает....
Прикрепления: 7385330.png(18Kb)
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Изменение нескольких стилей (Изменение при наведении мышью на текст+рисунок и рисунок)
Страница 1 из 11
Поиск: