Как выбрать конкретный элемент?

Question

[westdp]

Привет всем, в программировании не очень, нужна помощь есть 4 статьи c картинкой и описанием

<article>
        <h1>Test One</h1>
        <img src="img link" alt="/">
        <p>Toster Toster Toster Toster</p>
 </article>
/***/
<article>
        <h1>Test One</h1>
        <img src="img link" alt="/">
        <p>Toster Toster Toster Toster</p>
  </article>

Нужно чтобы при наведении на тег h1 добавлялся стиль к картинке выбраной статьи, а не всех.

var scale = 1.1;
            $("img").css({
                transform: 'scale(' + scale + ')'
 });

А при выведении курсора за границы тега h1 стили убирались.
Спасибо)

Answer 1

[Евгений Петров]

Это реализуется с помощью CSS

h1:hover ~ img {
	transform: scale(1.1, 1.1);
}

И я умоляю — используйте классы. Полагаться на имя тэга — плохо, плохо, плохо.

Update:
Выясняется, что и структура другая, и наводиться нужно на иной элемент.
Вот этот jQuery.

Comments

[westdp]

То что будут классы - это без вопросов, но мне нужно JS)

[Евгений Петров]

westdp: Доктор, у меня левое ухо ненормальное — оно больше, чем правое.
Давайте уменьшим его до нормальных размеров.
А можно правое сделать ненормальным?

[asdz]

Евгений Петров: Ахахаха!

[Евгений Петров]

Если вы не поняли — вам не нужен JS для решения этой задачи.

[Илья Шатохин]

westdp: вам не нужен JS, Евгений Петров предложил решение на чистом CSS. А если невтерпеж JS, то у jquery есть метод .hover

[westdp]

у меня вот такая структура, на CMS Wordpress, css не хочет работать что предложил Евгений Петров

[westdp]

jsfiddle.net/gayz1m04

[westdp]

Метод у jquary работает, но для всех

[Евгений Петров]

Так вы описывайте ту структуру, что у вас, а не придуманную на ходу.

[westdp]

Евгений Петров: Специально и сбросил на jsfiddle)

[Евгений Петров]

jsfiddle.net/petroveg/gayz1m04/1

[xmoonlight]

Евгений Петров: Жека, не мешай изучать человеку jquery)

[westdp]

Евгений Петров: jsfiddle.net/gayz1m04/2, мне нужно не при наведении на картинку, а при наведении на .the-title

[Евгений Петров]

westdp: Держите свой jQuery (он так пишется, да) jsfiddle.net/petroveg/gayz1m04/3

[Евгений Петров]

xmoonlight: Тут проблема не в библиотеке, а в неумении формулировать вопрос...

[westdp]

Евгений Петров: Спасибо

[xmoonlight]

Евгений Петров: никто не сказал же, что в библиотеке проблема-то)

[keslo]

Евгений Петров я уже заходу на тостер, чтобы почитать ваши ответы на вопросы )))

Answer 2

[Артем Грибков]

Можно сделать вот так codepen.io/pen

Comments

[westdp]

У меня ссылка пустая)

[holfza]

Отличное решение? Как вам это удалось? Вы маг?

Answer 3

[rakro]

Вот на JQuery

$('h1').hover(function() {
		$(this).next('img').css({transform: 'scale(' + scale + ')'});
	}, function() {
		$(this).next('img').css({transform: 'none'});
	});