Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Общие вопросы » Скажите, пожалуйста

Скажите, пожалуйста

vip.boss 13.08.2014 Все вопросы » Общие вопросы 2654

вопрос

При наведении на социальные сети :hover меняет цвет на #ea3e26.Как сделать так чтобы при наведении на "Твинтер" :hover менял цвет на #55acee,"Фейсбук" на #3b5998,"ВКонтакте" на #2B587A Гугл+ на #ea3e26.

css

#share-popup {
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    position: absolute;
    width: 414px;
    display:none;
    z-index: 100;
    padding: 10px 0;
    opacity: 0;
    -webkit-transition: opacity .4s, visibility .1s linear .4s;
    -moz-transition: opacity .4s, visibility .1s linear .4s;
    -o-transition: opacity .4s, visibility .1s linear .4s;
    transition: opacity .4s, visibility .1s linear .4s;
}

#share-popup.show {
    display:block;
    opacity: 1;
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
}

#share-popup .social {
    padding: 0 0 10px 17px;
    height: 40px;
}

#share-popup .social p {
    padding-bottom: 10px;
    margin: 0;
    font-weight: bold;
}

#share-popup .social ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#share-popup .social ul li {
    float: left;
    margin-right: 20px;
    padding-top: 2px;
    position: relative;
}

#share-popup .social ul a {
    text-decoration: none;
    font-size: 11px;
    display: inline-block;
    color: #aaa;
    padding-left: 25px;
}

#share-popup .social ul a:hover {
    text-decoration: underline;
    color: #ea3e26;
}

#share-popup .social a span{
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: url(../dleimages/social-icons.png) 20px 20px no-repeat;
    position: absolute;
    left: 0;
    top: 0;
}

#share-popup .social .tw span{
    background-position: 0 -20px;
}

#share-popup .social .tw:hover span{
    background-position: 0 0;
}

#share-popup .social .fb span{
    background-position: -20px -20px;
}

#share-popup .social .fb:hover span {
    background-position: -20px 0;
}

#share-popup .social .vk span{
    background-position: -40px -20px;
}

#share-popup .social .vk:hover span {
    background-position: -40px 0;
}

#share-popup .social .gp span{
    background-position: -60px -20px;
}

#share-popup .social .gp:hover span {
    background-position: -60px 0;
}

#share-popup .link {
    clear: both;
    border-top: 1px solid #d9d9d9;
    padding: 10px 5px 0 10px;
    line-height: 1.2;
    overflow: hidden;
    margin: 0 7px;
}

#share-popup .link p {
    font-weight: bold;
    padding: 0 0 3px 0;
    margin: 0;
}

#share-popup .link span {
    color: #999;
    font-size: 10px;
    display: block;
    padding-top: 3px;
}

#share-popup .link a {
    display: block;
}

Ответил: КЭП

Пожалуйста!

10 комментариев

Юзер

1599

FastFud - 2014-06-2113 августа 2014 13:52 - #33786

Если я правильно понял то:

Показать / Скрыть текст

#share-popup .social .tw span{
    background-position: 0 -20px;
}

#share-popup .social .tw:hover span{
    background-position: 0 0;
    background-color: #55acee;
}

#share-popup .social .fb span{
    background-position: -20px -20px;
}

#share-popup .social .fb:hover span {
    background-position: -20px 0;
    background-color: #3b5998;
}

#share-popup .social .vk span{
    background-position: -40px -20px;
}

#share-popup .social .vk:hover span {
    background-position: -40px 0;
    background-color: #2B587A;
}

#share-popup .social .gp span{
    background-position: -60px -20px;
}

#share-popup .social .gp:hover span {
    background-position: -60px 0;
    background-color: #ea3e26;
}

Гости

116

vip.boss - 2014-06-2113 августа 2014 13:58 - #33787

Как сделать чтобы только менял цвет текста

Юзер

1599

FastFud - 2014-06-2113 августа 2014 14:26 - #33789

Показать / Скрыть текст

#share-popup .social .tw span{
    background-position: 0 -20px;
}

#share-popup .social .tw:hover span{
    background-color: #55acee;
}

#share-popup .social .fb span{
    background-position: -20px -20px;
}

#share-popup .social .fb:hover span {
    background-color: #3b5998;
}

#share-popup .social .vk span{
    background-position: -40px -20px;
}

#share-popup .social .vk:hover span {
    background-color: #2B587A;
}

#share-popup .social .gp span{
    background-position: -60px -20px;
}

#share-popup .social .gp:hover span {
    background-color: #ea3e26;
}

Гости

116

vip.boss - 2014-06-2113 августа 2014 14:29 - #33790

Опять красный цвет текста, меняется только цвет иконок.

вот весь css код

/*---Выделение текста и всплывающее окно (поделиться ссылкой)---*/
#marker-bar,
#txtselect_marker {
    display: block;
    visibility: hidden;
    position: absolute;
    z-index: 1200;
    opacity: 0;
    -webkit-transition: opacity .4s, visibility .1s linear .4s;
    -moz-transition: opacity .4s, visibility .1s linear .4s;
    -o-transition: opacity .4s, visibility .1s linear .4s;
    transition: opacity .4s, visibility .1s linear .4s;
}
#txtselect_marker {
    cursor: pointer;
    background:url(../dleimages/marker.png) -0px -0px no-repeat;
}

#txtselect_marker:hover {
        background-position: -0px -32px;
}

#marker-bar{
    border: 1px solid #ccc;
    border-radius: 15px;
    background: #fff;
    padding: 5px 10px;
    cursor: default;
    box-shadow: 0px 0px 4px #ccc;
}

#marker-bar.show {
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
    visibility: visible;
}

#txtselect_marker.show {
        /* XXX make a common css fadeIn/fadeOut classes */
    visibility: visible;
    width: 32px;
    height: 32px;
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
}

#marker-bar .masha-social,
#marker-bar .masha-marker{
    cursor: pointer;
    display: block;
    margin: 0 5px;
    float: left;
}

#marker-bar .masha-marker{
    line-height: 1em;
    color: #aaa;
    border-bottom: 1px dotted #aaa;
    margin-right: 10px;
}

#marker-bar .masha-marker:hover {
    color: #ea3e26;
    border-color: #ea3e26;
}

.user_selection, .user_selection_true {
    background: #c4f47d;
    padding: 2px 0;
}
.user_selection a.txtsel_close, .user_selection_true a.txtsel_close {
    display:none;
}
.user_selection .closewrap, .user_selection_true .closewrap {
    position: relative;
}
.user_selection.hover a.txtsel_close, .user_selection_true.hover a.txtsel_close {
    display: inline-block;
    position: absolute;
    top: -7px;
    left: -5px;
    width: 33px;
    height: 33px;
    background: url(../dleimages/closemarker.png) -0px -0px no-repeat;
}

.user_selection.hover a.txtsel_close:hover, .user_selection_true.hover a.txtsel_close:hover {
    background-position: -0px -33px;
}


#share-popup {
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    position: absolute;
    width: 414px;
    display:none;
    z-index: 100;
    padding: 10px 0;
    opacity: 0;
    -webkit-transition: opacity .4s, visibility .1s linear .4s;
    -moz-transition: opacity .4s, visibility .1s linear .4s;
    -o-transition: opacity .4s, visibility .1s linear .4s;
    transition: opacity .4s, visibility .1s linear .4s;
}

#share-popup.show {
    display:block;
    opacity: 1;
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
}

#share-popup .social {
    padding: 0 0 10px 17px;
    height: 40px;
}

#share-popup .social p {
    padding-bottom: 10px;
    margin: 0;
    font-weight: bold;
}

#share-popup .social ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#share-popup .social ul li {
    float: left;
    margin-right: 20px;
    padding-top: 2px;
    position: relative;
}

#share-popup .social ul a {
    text-decoration: none;
    font-size: 11px;
    display: inline-block;
    color: #aaa;
    padding-left: 25px;
}

#share-popup .social ul a:hover {
    text-decoration: underline;
    color: #ea3e26;
}

#share-popup .social a span{
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: url(../dleimages/social-icons.png) 20px 20px no-repeat;
    position: absolute;
    left: 0;
    top: 0;
}

#share-popup .social .tw span{
    background-position: 0 -20px;
}

#share-popup .social .tw:hover span{
    background-position: 0 0;
}

#share-popup .social .fb span{
    background-position: -20px -20px;
}

#share-popup .social .fb:hover span {
    background-position: -20px 0;
}

#share-popup .social .vk span{
    background-position: -40px -20px;
}

#share-popup .social .vk:hover span {
    background-position: -40px 0;
}

#share-popup .social .gp span{
    background-position: -60px -20px;
}

#share-popup .social .gp:hover span {
    background-position: -60px 0;
}

#share-popup .link {
    clear: both;
    border-top: 1px solid #d9d9d9;
    padding: 10px 5px 0 10px;
    line-height: 1.2;
    overflow: hidden;
    margin: 0 7px;
}

#share-popup .link p {
    font-weight: bold;
    padding: 0 0 3px 0;
    margin: 0;
}

#share-popup .link span {
    color: #999;
    font-size: 10px;
    display: block;
    padding-top: 3px;
}

#share-popup .link a {
    display: block;
}

Юзер

1599

FastFud - 2014-06-2113 августа 2014 14:33 - #33791

Добавить:

color: #fff;

#fff - Это белый цвет.

Гости

116

vip.boss - 2014-06-2113 августа 2014 14:49 - #33792

нифига не выходит

Юзер

1599

FastFud - 2014-06-2113 августа 2014 14:50 - #33793

Скиньте ваш код: сюда и тогда и я может пойму и помогу.

Гости

116

vip.boss - 2014-06-2113 августа 2014 15:00 - #33794

Я ведь написал

css код

/*---Выделение текста и всплывающее окно (поделиться ссылкой)---*/
#marker-bar,
#txtselect_marker {
    display: block;
    visibility: hidden;
    position: absolute;
    z-index: 1200;
    opacity: 0;
    -webkit-transition: opacity .4s, visibility .1s linear .4s;
    -moz-transition: opacity .4s, visibility .1s linear .4s;
    -o-transition: opacity .4s, visibility .1s linear .4s;
    transition: opacity .4s, visibility .1s linear .4s;
}
#txtselect_marker {
    cursor: pointer;
    background:url(../dleimages/marker.png) -0px -0px no-repeat;
}

#txtselect_marker:hover {
        background-position: -0px -32px;
}

#marker-bar{
    border: 1px solid #ccc;
    border-radius: 15px;
    background: #fff;
    padding: 5px 10px;
    cursor: default;
    box-shadow: 0px 0px 4px #ccc;
}

#marker-bar.show {
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
    visibility: visible;
}

#txtselect_marker.show {
        /* XXX make a common css fadeIn/fadeOut classes */
    visibility: visible;
    width: 32px;
    height: 32px;
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
}

#marker-bar .masha-social,
#marker-bar .masha-marker{
    cursor: pointer;
    display: block;
    margin: 0 5px;
    float: left;
}

#marker-bar .masha-marker{
    line-height: 1em;
    color: #aaa;
    border-bottom: 1px dotted #aaa;
    margin-right: 10px;
}

#marker-bar .masha-marker:hover {
    color: #ea3e26;
    border-color: #ea3e26;
}

.user_selection, .user_selection_true {
    background: #c4f47d;
    padding: 2px 0;
}
.user_selection a.txtsel_close, .user_selection_true a.txtsel_close {
    display:none;
}
.user_selection .closewrap, .user_selection_true .closewrap {
    position: relative;
}
.user_selection.hover a.txtsel_close, .user_selection_true.hover a.txtsel_close {
    display: inline-block;
    position: absolute;
    top: -7px;
    left: -5px;
    width: 33px;
    height: 33px;
    background: url(../dleimages/closemarker.png) -0px -0px no-repeat;
}

.user_selection.hover a.txtsel_close:hover, .user_selection_true.hover a.txtsel_close:hover {
    background-position: -0px -33px;
}


#share-popup {
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    position: absolute;
    width: 414px;
    display:none;
    z-index: 100;
    padding: 10px 0;
    opacity: 0;
    -webkit-transition: opacity .4s, visibility .1s linear .4s;
    -moz-transition: opacity .4s, visibility .1s linear .4s;
    -o-transition: opacity .4s, visibility .1s linear .4s;
    transition: opacity .4s, visibility .1s linear .4s;
}

#share-popup.show {
    display:block;
    opacity: 1;
    -webkit-transition: opacity .4s, visibility 0s;
    -moz-transition: opacity .4s, visibility 0s;
    -o-transition: opacity .4s, visibility 0s;
    transition: opacity .4s, visibility 0s;
    opacity: 1;
}

#share-popup .social {
    padding: 0 0 10px 17px;
    height: 40px;
}

#share-popup .social p {
    padding-bottom: 10px;
    margin: 0;
    font-weight: bold;
}

#share-popup .social ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#share-popup .social ul li {
    float: left;
    margin-right: 20px;
    padding-top: 2px;
    position: relative;
}

#share-popup .social ul a {
    text-decoration: none;
    font-size: 11px;
    display: inline-block;
    color: #aaa;
    padding-left: 25px;
}

#share-popup .social ul a:hover {
    text-decoration: underline;
    color: #ea3e26;
}

#share-popup .social a span{
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: url(../dleimages/social-icons.png) 20px 20px no-repeat;
    position: absolute;
    left: 0;
    top: 0;
}

#share-popup .social .tw span{
    background-position: 0 -20px;
}

#share-popup .social .tw:hover span{
    background-position: 0 0;
}

#share-popup .social .fb span{
    background-position: -20px -20px;
}

#share-popup .social .fb:hover span {
    background-position: -20px 0;
}

#share-popup .social .vk span{
    background-position: -40px -20px;
}

#share-popup .social .vk:hover span {
    background-position: -40px 0;
}

#share-popup .social .gp span{
    background-position: -60px -20px;
}

#share-popup .social .gp:hover span {
    background-position: -60px 0;
}

#share-popup .link {
    clear: both;
    border-top: 1px solid #d9d9d9;
    padding: 10px 5px 0 10px;
    line-height: 1.2;
    overflow: hidden;
    margin: 0 7px;
}

#share-popup .link p {
    font-weight: bold;
    padding: 0 0 3px 0;
    margin: 0;
}

#share-popup .link span {
    color: #999;
    font-size: 10px;
    display: block;
    padding-top: 3px;
}

#share-popup .link a {
    display: block;
}

При наведении на социальные сети текст меняется на красный цвет.Как сделать так чтобы при наведении на "Твинтер"
менял цвет на #55acee,"Фейсбук" на #3b5998,"ВКонтакте" на #2B587A Гугл+ на #ea3e26.

Юзер

DreamFix - 2014-06-2115 августа 2014 17:21 - #33903

1.Заменяете свой код на этот:

ul,
ol {display:block; padding:0; margin:0;}
ul li {display:list-item; margin:0 0 0 20px; padding:0 0 0 0px;list-style-type: none;}
ol li {display:list-item; margin:0 0 0 20px; padding:0 0 0 0px;list-style-type: none;}

2. после:


/*---Выделение текста и всплывающее окно (поделиться ссылкой)---*/

добавьте:


a.fb:hover {
color: #3b5998 !important;
}
a.vk:hover {
color: #2B587A !important;
}
a.tw:hover {
color: #55ACEE !important;
}

+БОНУС
Если нужно также сменить иконки.
Скачайте картинку и замените ней свою в папке ВАШ_ШАБЛОН/dleimages/social-icons.png

Гости

116

vip.boss - 2014-06-2115 августа 2014 18:21 - #33911

Спасибо тебе огромное :)

Скажите, пожалуйста

Ответил: КЭП

10 комментариев

Похожие вопросы

Не работает увеличение картинок

Кривое отображение сайта в IE

Отправленные письма Вылазит За Пределы Шаблона

Как изменить вид навигации 1 фотки на 2 ?

Форма добавление комментариев

Плавающую навигационную панель

Кнопка Вверх

Как сделать чтобы черный менялся на белый цвет ?

Вид добавления комментариев DataLife Engine

Как изменить цвет рейтинга mrating