Как сделать так, чтобы при наведении мыши на один элемент, менялись css-свойства другого элемента?

нужно при помощи jquery сделать так, чтобы при наведении мыши на элемент .sights__item-title менялись css свойства .sights__image. проблема только с тем, как выбрать этот элемент. пробовал искать так:
$('.sights__item-title').on('mouseover', function() {
$(this).parent('.sights__item').find('.sights__image').addClass('.sights__image_hover');
});

Вот HTML:

<div class="sights__features_left-column">
					<div class="sights__item">
						<a href="#brest"><div class="sights__image sights__image_brest"></div></a>			
						<a href="#brest"><h3 class="sights__item-title">Brest hero-fortress</h3></a>
					</div>
					<div class="sights__item">
						<a href="#braslav"><div class="sights__image sights__image_braslav"></div></a>
						<a href="#braslav"><h3 class="sights__item-title">braslav lakes national park</h3></a>
					</div>
					<div class="sights__item">
						<a href="#kolozha"><div class="sights__image sights__image_kolozha"></div></a>
						<a href="#kolozha"><h3 class="sights__item-title">kolozha church</h3></a>
					</div>
					<div class="sights__item">
						<a href="#mir"><div class="sights__image sights__image_mir"></div></a>
						<a href="#mir"><h3 class="sights__item-title">Mir kastle</h3></a>
					</div>
					<div class="sights__item">
						<a href="#khatyn"><div class="sights__image sights__image_khatyn"></div></a>
						<a href="#khatyn"><h3 class="sights__item-title">memorial complex of khatyn</h3></a>
					</div>
					<div class="sights__item">
						<a href="#berezin"><div class="sights__image sights__image_berezin"></div></a>
						<a href="#berezin"><h3 class="sights__item-title">berezinsky biosphere reserve</h3></a>
					</div>
				</div>