Смена цвета при нажатии

@Арти7030 · Регистрация: 27.12.2012

Студворк — интернет-сервис помощи студентам

День добрый братцы.
Есть упаковка с рамкой голубого цвета, при наведении на упаковку, рамка становится более светлая, но не суть. Далее при нажатии на упаковку цвет меняется на розовый и тут загвоздка, при перемещении мыши в пределах упаковки цвет возвращается к голубому, как оставить наведение и цвет в тех категориях где они нужны?
1 - Начальный вариант упаковки;
2 - После клика;
3 - Поводил мышью (надпись внизу правильная, а цвет нет).
Для полной картины

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="block_1" class="wh">
    <!--Блок с текстом Нямушки 1-->
    <div id="blockText" class="block_text">
     <article id="article">
      <span class="zagolovok">Сказочное заморское яство</span>
      <span class="nyamka"><b>Нямушка</b></span><br />
      <span class="s"><b>с фуа-гра</b></span><br />
      <p><b>10</b> порций<br />
      мышь в подарок</p>
     </article>
    <!--Круглый блок-->
    <div class="circle" id="d">
     <article>0,5</article><article id="kg">кг</article>
    </div>
    </div>
    <div id="k"></div>
    <!--Конец блока с текстом-->
   </div>

JS

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('#block_1').mouseover(function(){ 
       $(this).css({'border':'solid 6px #2EA8E6'});
   });
   $('#block_1').mouseover(function(){
    $('#d').css({'background-color':'#2EA8E6'});
   });
$('#block_1').click(function(){
    $(this).css({'border':'solid 6px #E72E7A'});
   });
   $('#block_1').click(function(){
    $('#d').css({'background-color':'#E72E7A'});
    $('#ad').text('Печень утки разварная с артишоками.');
   });
});

@Арти7030 · 08.02.2016, 17:22 **[ТС]**

Скрины

@Alekzender · 09.02.2016, 16:49

1. Зачем дублировать mouseOver и click?
2. На вашем месте я ховер делал бы цсс-ом, а при клике просто навешивал на блок клас с переопределенным бордером и ховером

@Арти7030 · 09.02.2016, 18:07 **[ТС]**

Alekzender, я уже дочитал до этого. Но спасибо. Скажите как сделать, чтобы с розовой рамки переключиться к первоначальному виду?

@Alekzender · 09.02.2016, 18:52

если по моему методу, то просто убрать класс, в котором прописана розовая рамка

@Арти7030 · 09.02.2016, 21:17 **[ТС]**

Alekzender, можете объяснить доступнее как установить наводку светло голубую при голубой рамке, а светло розовую при розовой. Вот цвет наводки при голубой рамке:

CSS
1
2
.wh:hover { border: solid 6px #2EA8E6; }
.wh:hover .circle { background-color: #2EA8E6; }

@rasschitai · 10.02.2016, 08:23

при наведении смотрите какой класс, и в зависимость от него делайте то, что вам нужно

JavaScript
1
2
3
4
if($(this).hasClass('_если_класс_голубой_рамки_')){
 
    $(this).addClass('_добавляем_класс_светло_голубой_рамки_');
}

@Alekzender · 10.02.2016, 09:41

Сообщение от Арти7030

можете объяснить доступнее как установить наводку светло голубую при голубой рамке, а светло розовую при розовой.

CSS
1
2
3
4
5
.wh:hover { border: solid 6px #2EA8E6; }
.wh:hover .circle { background-color: #2EA8E6; }
 
.wh.pink:hover { /* стиль розовой рамки */ }
.wh.pink:hover .circle { /* стиль круга при розовой рамке */ }

В скрипте же только при клике добавляете/убираете класс .pink

@Арти7030 · 10.02.2016, 15:32 **[ТС]**

rasschitai, Alekzender, еще вопрос, при розовой рамке курсор на упаковке "Сказочное яство" убрав курсор с упаковки "Котэ не одобряет".

JavaScript
1
2
3
4
5
6
7
var chan = $('.changes_1');   
    chan.click(function(){
      var bloc_1 = $('#block_1').toggleClass('pink');
      $('.circle_1').toggleClass('pinkCi');
      bloc_1.mouseout(function(){ $('.zagolovok_1').text('Котэ не одобряет?').addClass('zagolovokIzi');})
      bloc_1.mouseover(function(){ $('.zagolovok_1').text('Сказочное заморское яство').removeClass('zagolovokIzi');})
    });

Когда возвращаюсь к голубой рамке, действия mouseover и mouseout сохраняются, как их запретить когда активна голубая рамка?

@Alekzender · 10.02.2016, 17:18

не надо вообще использовать mouseover и mouseout, тут прекрасно справляется css свойство :hover, которое при наведении применит какой-то стиль (смотр. мое предыдущее сообщение), а если убрать курсор - этот же стиль отменит

Добавлено через 6 минут
работающий пример

HTML5
1
2
3
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.test {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid #55f;
}
.test:hover {
  border-color: #99f;
}
 
.test.clicked {
  border-color: #f55;
}
.test.clicked:hover {
  border-color: #f99;
}

JavaScript
1
2
3
$('.test').on('click', function() {
  $(this).toggleClass('clicked');
});

@Арти7030 · 10.02.2016, 20:03 **[ТС]**

Alekzender, ништяк. Спасибо. Если не составит труда киньте пару книжек по js. И clicked, что за свойство такое, инфы не нашел что-то.

Добавлено через 1 минуту
Alekzender, про clicked забудьте. Я под вечер туплю.

@Alekzender · 11.02.2016, 13:09

если ознакомиться с основами - javascript.ru
шпаргалка на все случаи жизни - MDN
Прошу учитывать, это мои личные предпочтения и на истину в последней инстанции не претендует
Вообще в инете очень много информации, гугление спасет

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@Арти7030 1 / 1 / 3 Регистрация: 27.12.2012 Сообщений: 192
	08.02.2016, 17:22 [ТС]
	Скрины Миниатюры 0

@Alekzender 37 / 37 / 23 Регистрация: 21.02.2014 Сообщений: 112
	09.02.2016, 16:49
	1. Зачем дублировать mouseOver и click? 2. На вашем месте я ховер делал бы цсс-ом, а при клике просто навешивал на блок клас с переопределенным бордером и ховером 0

@Арти7030 1 / 1 / 3 Регистрация: 27.12.2012 Сообщений: 192
	09.02.2016, 18:07 [ТС]
	Alekzender, я уже дочитал до этого. Но спасибо. Скажите как сделать, чтобы с розовой рамки переключиться к первоначальному виду? 0

@Alekzender 37 / 37 / 23 Регистрация: 21.02.2014 Сообщений: 112
	09.02.2016, 18:52
	если по моему методу, то просто убрать класс, в котором прописана розовая рамка 0

@Арти7030 1 / 1 / 3 Регистрация: 27.12.2012 Сообщений: 192
	10.02.2016, 20:03 [ТС]
	Alekzender, ништяк. Спасибо. Если не составит труда киньте пару книжек по js. И clicked, что за свойство такое, инфы не нашел что-то. Добавлено через 1 минуту Alekzender, про clicked забудьте. Я под вечер туплю. 0

@Alekzender 37 / 37 / 23 Регистрация: 21.02.2014 Сообщений: 112
	11.02.2016, 13:09
	если ознакомиться с основами - javascript.ru шпаргалка на все случаи жизни - MDN Прошу учитывать, это мои личные предпочтения и на истину в последней инстанции не претендует Вообще в инете очень много информации, гугление спасет 0

Смена цвета при нажатии

Решение