Чат сообщества
|
   |
| Модератор форума: Yuri_G |
| Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Изменение нескольких стилей (Изменение при наведении мышью на текст+рисунок и рисунок) |
| Изменение нескольких стилей |
|
Уважаемые знатоки столкнулся вот с такой проблемой:
Допустим есть элемент (в моем случае изображение) и текст привязанный к нему. Как сделать так чтобы при наведении на текст - изображение меняло цвет на "цвет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 ниже выписка из нее: Код #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/ Сама картинка вот (обращаю внимание что каждый второй белого цвета - поэтому тут сливается с фоном)  |
|
Здравствуйте, у меня сейчас нет возможности написать Вам рабочий код, но могу Вам посоветовать, что почитать. http://htmlbook.ru/samcss/kontekstnye-selektory.
Что-то вроде этого: .text:hover .img {стили для изображения при наведении на текст} |
|
Цитата PtrPt (  ).text:hover .img {стили для изображения при наведении на текст}  Добавлено (20 Июл 2015, 18:21:29) Цитата PtrPt ( ).text:hover .img |
|
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 :)
|
|
Цитата PtrPt ( )много сторчек в Вашем css поменял  Прикрепления:
0148875.png
(43.8 Kb)
|
|
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 :)
|
|
Цитата PtrPt ( )До того, как поправили кнопку e-mail, в IE всё остальное работало или нет? Может есть какая-то ограниченность длинны картинки или количества элементов? получается я добавил их после... В общем засада конечно - с другой стороны кто сейчас им пользуется? |
|
в общем какие-то чудеса - только что поменял местами изображения телефона и ОК - и он показал телефон на месте ОК а ОК на месте телефона не показал - но при обратной перестановке показал все элементы
фиг его знает.... Прикрепления:
7385330.png
(17.9 Kb)
|
| |||
| |||