Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы
Старый 10.08.2017, 08:22   #1
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 352
Репутация: -23
По умолчанию Как правильно обратиться к css классу

Подскажите пожалуйста, пытаюсь обратиться к классу .gamma-description-wrapper через jq для изменения background
Код HTML:
$('.gamma-description-wrapper').css({
    'background': 'rgba(0,0,0,0.7)'
   });
Но не выходит.
Вот разметка
Код HTML:
<div class="gamma-single-view" style="display: block;">
<div class="gamma-options gamma-options-single">
<div class="gamma-buttons">
<button class="gamma-btn-close"></button>
<button class="gamma-btn-ssplay"></button>
</div>
</div>
<nav class="gamma-nav"><span class="gamma-prev"></span><span class="gamma-next"></span></nav>
<div class="gamma-description-wrapper">
<div class="gamma-description" style="">
::before
<h3>Sky high</h3></div>
</div>
<img src="" style="">
</div>
Вот сам css, ну не весь конечно)) главная часть так сказать)
Код HTML:
.gamma-description {
    background: #fff;
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    text-align: center;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 18px;
    color: #fff;
    transition: opacity 0.4s ease-in-out;
}
 
.no-touch .gamma-gallery li:hover .gamma-description {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    opacity: 1;
}
 
.gamma-description:before {
    content: '';
    height: 100%;
}
 
.gamma-description:before,
.gamma-description h3 {
    display: inline-block;
    vertical-align: middle;
}
 
.gamma-description-wrapper {
    background: rgba(0,0,0,0.7);
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 10;
    padding: 5px 0;
}
Подскажите как это сделать то))
__________________
Еду медленно, но верно!
spoon100500 вне форума   Ответить с цитированием
Старый 10.08.2017, 13:51   #2
spoon100500
Форумчанин
 
Аватар для spoon100500
 
Регистрация: 14.10.2016
Сообщений: 352
Репутация: -23
По умолчанию

С background в .gamma-description-wrapper вопрос решил, но возник следующий)
Как поменять colore у Sky high?
Код HTML:
<div class="gamma-description" style="">
::before
Sky high
</div>
Я понимаю так, что он наследует все из .gamma-description да еще и псевдоэлементом является.
Код HTML:
.gamma-description:before {
    content: '';
    height: 100%;
}
__________________
Еду медленно, но верно!
spoon100500 вне форума   Ответить с цитированием
Старый 11.08.2017, 00:37   #3
Вадим Мошев
гигаМодератор :)
Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес:
Сообщений: 7,593
Репутация: 3678
По умолчанию

Цитата:
Сообщение от spoon100500 Посмотреть сообщение
С background в .gamma-description-wrapper вопрос решил
Напишите, как вы это сделали. Это будет полезно окружающим.


Цитата:
Сообщение от spoon100500 Посмотреть сообщение
понимаю так, что он наследует все из .gamma-description да еще и псевдоэлементом является.
Сам Sky high не является псевдоэлементом - он является заголовком h3. Сам же псевдоэлементы в HTML никак не задаются, у них нет тегов, поэтому указывать их, как "::before" - неверно и бесполезно.

Насколько я знаю, напрямую воздействовать на псевдоэлементы через js/jq невозможно. Я бы посоветовал сделать так.

Код:

.class1:before {
оформление_1
}

.class2:before {
оформление_2
}

потом программно изменить class1 на class2
Вадим Мошев вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS: как обратиться к элементу? Fenex HTML и CSS 1 02.03.2012 15:01
Как из класса B обратиться к классу A, владеющему классом B? Ferrum26 Общие вопросы Delphi 14 24.06.2010 09:46
как в .js файле обратиться к css стилю Ruska882009 HTML и CSS 0 10.04.2009 14:51
Как правильно обратиться к таблице DACL? DRX_ Общие вопросы Delphi 2 11.02.2009 15:27
Обратиться к классу (Delphi) Air Помощь студентам 16 17.07.2008 19:51


19:14.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru