Как взаимодействовать с элементом который находится в пределах блока?

Question

[Дмитрий]

Вопроса сразу два, что бы не создавать лишнего:

1. У меня есть hover кнопки реализованный с помощью CSS, и есть hover другого элемента, реализованный с помощью jQuery. При наведении на этот (другой) элемент кнопка должна выполнять hover. Но если сначала навести на элемент, который hover-ит кнопку с помощью скрипта, то потом не работает hover CSS-a. Знаю что объяснил не очень понятно, потому вот гифка для демонстрации. Объясните, что происходит? Что бы хоть знать что читать.

2. Собственно этот же элемент:
У меня есть вот такой код HTML

<article class="folio-work folio-work-5">
    <div class="folio-work_descr">
        <div class="folio-work_image">	
            <img src="img/mogo_modal.jpg" alt="">
        </div>
        <div class="folio-work_intro">
            <h3>Atlantida</h3>
            <p>Адаптивный лендинг: <a href="http://letehaha.github.io/Atlantida/">главная</a>,
                                   <a href="http://letehaha.github.io/Atlantida/blog/">блог</a>, 
                                   <a href="http://letehaha.github.io/Atlantida/blog/post_with_sidebar/index.html">запись</a>.
            </p>
        </div>
        <div class="folio-work_btns">
            <a class="folio-work_btn" href="http://letehaha.github.io/MoGo/" target="_blank">Посмотреть</a>
        </div>
    </div>
</article>

Такой же код имеют и все остальные блоки с работами. Я хочу, что бы при наведении на .folio-work_intro p a:first-child срабатывал hover у .folio-work_btn.

Написал вот это (да, мне лучше стилями, без класса):

$('.folio-work_intro p a:first-child').hover(function() {
		$('.folio-work_btn').css({
			"background-color":"rgba(3,156,253,1)",
			"color":"#fff",
			"font-weight": "300"
		})
	}, function() {
		$('.folio-work_btn').css({
			"background-color":"inherit",
			"color":"rgba(3,156,253,1)",
			"font-weight": "400"
		})
	});

Но получилось, что из-за такого кода hover применяется ко всем кнопкам (наглядно вот здесь(гифка)).

Так вот к чему я веду. Я не знаю как это решить. Мне как-то отдельно перебирать блоки, или есть какой-то магический метод применять эффект только внутри одного класса, или может ещё что-то? Или же просто посоветуйте как это решить)

Answer 1

[Bowen]

Попробуйте так:

function folioChangeStyles(el, mouseenter) {
	$('.folio-work_btn', el)
	.css({
		'background-color': mouseenter ? 'rgba(3,156,253,1)' : 'inherit',
		'color'           : mouseenter ? '#fff' : 'rgba(3,156,253,1)',
		'font-weight'     : mouseenter ? 300 : 400
	});
};
$('.folio-work').on('mouseenter mouseout', 'a:first-child', function(e) {
	folioChangeStyles(e.delegateTarget, (e.type === 'mouseenter'));
});

Comments

[Дмитрий]

Можете пожалуйста объяснить вторую часть кода?)

[Bowen]

Дмитрий: А что тут собственно объяснить ? События mouseenter && mouseout вы сможете найти в документации к jQuery.

Answer 2

[Cannabiscat]

Попробуйте поиграться с контекстом( $(this) ) и https://api.jquery.com/closest/