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

@Арти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
Прошу учитывать, это мои личные предпочтения и на истину в последней инстанции не претендует
Вообще в инете очень много информации, гугление спасет

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

@Арти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

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

Решение