Событие над элементом, за исключением определенного блока?

Question

[tarthur]

есть такая старничка

1 - это общий блок в котором находятся контент слева 2 и блок 3 - у которого родитель блок 1
как при наведении на область 2 не затрагивать блок 3.
структура Html такая:

<блок 1>
     текст(2)
     <блок 3>
</блок 1>

вот как выглядит текст в области 2:

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

разметку менять нельзя, там адаптивно уже сверстано, нужно что-то думаю думать через jquery

Comments

[Hyubert]

или я чет не понял или вам просто нужно вешать обработчик на первого ребенка <блок 1>

[tarthur]

Hyubert: да именно, нужно повешать на 1й блок, что бы не задеть 3й, который находится в 1м и так как 3й потомок 1го он тоже получает на себе :hover.

[alex]

tarthur: а область 2 у вас из чего состоит? там же не голый текст, а наверняка теги есть, вот на них и вешайте обработчик, хотя хрен знает, вам наверно удобнее кидать кучу картинок вместо разметки или линка на сайт

Answer 1

[tarthur]

Все как я и ожидал просто. Вот мое решение:

;$(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");

Если кому надо пользуйтесь). Всем спасибо!

Answer 2

[kodwi]

Обернуть блок 2, т.е. текст, в свой div, дать ему id и оперировать только этим элементом.

Comments

[tarthur]

разметку менять нельзя, там адаптивно уже сверстано, нужно что-то думаю думать через jquery

[kodwi]

tarthur: то есть, у тебя такая разметка:

<div id="block1">
    Какой-то текст, ни во что не обернутый
    <div id="block3">
        ...
    </div>
</div>

???

[tarthur]

kodwi:
Какой-то текст, ни во что не обернутый
обернутый, в div но он занимает свою ширину и высотку, которую нельзя изменять

[Егор Живагин]

tarthur: так если обёрнутый, просто пропиши на обёртку hover ...

[tarthur]

Егор Живагин:
импосэбыл, он имеет свою ширину и высоту: prntscr.com/ev0x7l
(при этом там не тривиальная верстка, с учетом адаптивности и кроссбраузерности), а мне нужна вся область 2
то есть height 100% всей области 1 и width до блока 3,
а переверстывать такой блок адаптивно, не верно, да и для заказчика дорого будет, явно должно быть решение через jquery,
плюс таких похожих сверстаных блоков 3 на страницы и все должны иметь такой эффект на облости 2