Изменение стиля потомственных блоков при наведении на родителя

Office
22.04.2018 09:48:57 am
Привет! Есть множество таких блоков: 
<div class="ad">
	<div class="title">Title</div>
	<div class="content">Content</div>
	<div class="date">Date</div>
</div>

При наведение курсора на один из такой блок, стили всех потомственных блоков должны измениться. Я сделал так: 
$('.ad').hover(function() {
	$('.title').css(/* Стиль */);
	$('.content').css(/* Стиль */);
	$('.date').css(/* Стиль */);
});

Стиль меняется во всех блоках, а не только в том, на который навел курсор. Что надо дописать, чтобы стиль менялся только в том блоке, куда навели курсор?
Спасибо.
Dolphin
22.04.2018 10:17:37 am
Видимо, надо так:
$('.ad').hover(function() {
	$(this).find('.title').css(/* Стиль */);
	$(this).find('.content').css(/* Стиль */);
	$(this).find('.date').css(/* Стиль */);
});
Office
22.04.2018 10:43:45 am
Работает! А как теперь сделать, чтобы стиль менялся обратно, когда курсор убираешь с блока? Сейчас он остается таким, как его установил JS.
Dolphin
22.04.2018 11:02:59 am
Можно сделать так:
$('.ad').hover(function() {
	$(this).find('.title').css(/* Стиль при наведении курсора */);
	$(this).find('.content').css(/* Стиль при наведении курсора */);
	$(this).find('.date').css(/* Стиль при наведении курсора */);
},
function() {
	$(this).find('.title').css(/* Стиль при удалении курсора */);
	$(this).find('.content').css(/* Стиль при удалении курсора */);
	$(this).find('.date').css(/* Стиль при удалении курсора */);
});

А можно вообще обойтись без JS, на чистом CSS:
.ad:hover .title {
	/* Стиль при наведении курсора */
}

.ad:hover .content {
	/* Стиль при наведении курсора */
}

.ad:hover .date {
	/* Стиль при наведении курсора */
}

С использованием CSS без JS стиль автоматом будет становиться прежним, когда курсор будет убран с блока.
Office
22.04.2018 11:24:23 am
Slash, вариант на чистом CSS ещё лучше! Спасибо!