Как изменить CSS дочернего элемента блока при наведении посредством jQuery?

Question

[Николай]

С места в карьер:
Имеется 6 подобных блоков, сгруппированных флексбоксом:

<div class="info_block"> <img src="svg/brightness.svg" alt="" class="icon">
		  <h3 class="description_block">Редактирование</h3>
		  <p class="description_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, dicta alias fuga. Aperiam aliquid debitis consequatur, consequuntur eius, iure ducimus assumenda enim molestias quis doloribus ipsum provident minus incidunt! Quia!</p>
		</div>

Требуется, чтобы при наведении на один из блоков, менялся цвет бордюра, svg и h3. Бордюр через CSS настроил, svg не принципиально сейчас, тут я вставил его кажись не так как надо и доступа к нему нет для изменения параметра fill, главное для меня - чтобы при наведение менялся цвет h3.
Использовал этот код jQ:

$( "div.info_block" ).hover(
		  function() {
			$( "div.info_block h3" ).css( "color", "#1dde85" );
		  },
			function() {
			$( "div.info_block h3" ).css( "color", "" );
		  }
		);

НО! В данном случае при наведении на один блок, h3 меняется у всех дивов, что не есть гуд. Если же после .css( $( "color", "#1dde85") ) - то не происходит ровным счетом ничего. Что не так делаю? Сразу скажу, только учусь, поэтому не понимаю сложных jQ и JS, палками не бить, правда, есть ощущение что просто в глаза долблюсь и не вижу очевидного.
Пока вот такое непотребство вышло:

При наведении на блок:


UPD: поясню, да, можно реализовать через CSS, но тогда выходит следующее:

.info_block:active, .info_block:hover, .info_block:focus {
	border: 2px #1dde85 solid;
	color: black;
	transition: 200ms;
	transition-timing-function: ease-in-out;
	-webkit-transition: 200ms;
	-webkit-transition-timing-function: ease-in-out;
}

.info_block:active h3, .info_block:hover h3, .info_block:focus h3 {
	color: #1dde85;
	transition: 200ms;
	transition-timing-function: ease-in-out;
	-webkit-transition: 200ms;
	-webkit-transition-timing-function: ease-in-out;
}

Весьма громоздкая конструкция, учитывая что это лишь небольшая часть таблицы стилей. Хотелось бы все таки найти решение, где я ошибся в jQuery

UPD ver.2: Друзья, если Вам говорят, что надо копать экскаватором, то это не значит, что Вас просят показать как это делать лопатой. Нужен ответ конкретно по JS и ошибке.

Comments

[Kovalsky]

А почему не CSS :hover?

[Николай]

Никита Полевой: это то можно, но тогда css громоздкий выходит, мне сейчас для простой верстки читабельность собственной же писанины важна, а там считай дублирующиеся селекторы будут с разницей: группа для блока и группа для h3. Но спасибо, совсем забыл про такую возможность)
Да и просто хочется разобраться как работает на простейших связях jQuery, т.к. пока мне его негде применять в принципе для себя.

[Kovalsky]

Николай: у вас громоздко потому что вы определяете transition по ховеру, в вашем случае это не нужно. Transition можно определить как статическое правило, тогда для ховера у вас останутся только цвета, это 3 стилевых свойства.

К элементам DIV неприменимы псевдоклассы :focus и :active, их можно убрать из правила.

К тому же посмотрите на совместимость для transition, уже давно можно использовать его без префикса.

Получится как-то так:

.info_block,
.info_block h3 {
	transition: all .2s;
}
.info_block:hover {
  border: 2px #1dde85 solid;
  color: black;
}
.info_block:hover h3 {
  color: #1dde85;
}

Answer 1

[Александр Калинин]

А зачем тут JS можно на CSS

.div.info_block > h3:hover{
  color:red;
}

Comments

[Николай]

Еще раз: h3 подсвечивает при наведении курсора на родителя. Таким образом в CSS будет почти две группы схожих селекторов: hover для подсветки бордюра блока, и он же но только с правилом для h3. Громоздко.

[Александр Калинин]

Если JS to

$( "div.info_block" ).children('h3').hover(
     function() {
             $(this).css( "color", "#1dde85" );
      },
      function() {
              $(this).css( "color", "" ); // тут написать старый цвет
      }
);

[Николай]

Александр Калинин: спасибо за вариант, но тут опять же решение половинчатое: h3 подсвечивается в данном случае только при наведение на область h3 внутри блока, а нужно чтобы он загорался с бордером в любом месте нахождения курсора внутри div. Но близко к решению. Еще раз спасибо за старания!

[Александр Калинин]

ну можно и по другому

$( "div.info_block" ).hover(
     function() {
             $(this).css( "border", "1px solid red" );
             $(this).children('h3').css( "color", "#1dde85" );
            // или сократить
            //$(this).css( "border", "1px solid red" ).children('h3').css( "color", "#1dde85" );
      },
      function() {
              $(this).css( "border", "none" );
              $(this).children('h3').css( "color", "" ); // тут написать старый цвет
      }
);

Answer 2

[Сергей Собко]

Так а в чём сложность то? Обработчик на ховер по родительскому диву, внутри идите по детям от $(this), что бы не всплывало на всех элементах и меняйте им то, что нужно. transition в css задайте, где необходимо, либо используйте .animate();

Черновой вариант

$( "div.info_block" ).hover(function(){
    $(this).css("border", "value");
    $(this).children("h3").css({
         "color": "value",
          ...
    });
   $(this).children("img").css({
         "color": "value",
          ...
    });
});