Все как я и ожидал просто. Вот мое решение:
;$(document).ready(function(){
$(".section-2").mouseover(function( event ) {
$(".section-2").addClass('hover-link');
});
$(".section-2").mouseout(function( event ) {
$(".section-2").removeClass('hover-link');
});
$( "#section-2__right" ).mouseover(function( event ) {
$(".section-2").addClass('hover-link-off');
});
$( "#section-2__right" ).mouseout(function( event ) {
$(".section-2").removeClass('hover-link-off');
});
});
а теперь создаем такие классы(sass код):
.section-left-link {
/* Here first styles */
&:before {
/* Here first styles */
}
}
.section-2.hover-link.hover-link {
.section-left-link {
/* Here- HOVER styles */
&:before {
/* Here- HOVER styles */
}
}
}
.section-2.hover-link.hover-link-off {
.section-left-link {
/* Here- first styles */
&:before {
/* Here- first styles */
}
}
}
И так как секциций подобных на сайте у меня 3, была создана универсальная функция:
function getHoverLink(parentSelector, delHoverElem) { // parentSelector - элемент родитель. delHoverElem - удалить с этого потомка parentSelector ховер
$(parentSelector).mouseover(function( event ) {
$(parentSelector).addClass('hover-link');
});
$(parentSelector).mouseout(function( event ) {
$(parentSelector).removeClass('hover-link');
});
$(delHoverElem).mouseover(function( event ) {
$(parentSelector).addClass('hover-link-off');
});
$(parentSelector).mouseout(function( event ) {
$(parentSelector).removeClass('hover-link-off');
});
}
getHoverLink(".section-2", "#section-2__right");
getHoverLink(".section-3", "#section-3__right");
getHoverLink(".section-4", "#section-4__right");
Если кому надо пользуйтесь). Всем спасибо!