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

Question

[Javier Nazari]

codepen.io
Как организовать что-бы при наводке на картинку, подсвечивался элемент в данном случае - заголовок?
Ну или, при наводке на заголовок, высвечивалась информация картинки?
З.ы. верстка в коде кривая.
З.ы.ы. как и мои руки, вместе с скиллом (самоучка).

Answer 1

[todey]

Оберните весь код допустим в див с классом .cc и в стиле пропишите
.cc:hover a {
color: red;
}

Answer 2

[Danil Namaste]

HTML:

<img src="logo.png" alt="" data="Данные, которые нужно показать при hover">
<div class="result"></div>

jquery:

$('img').hover(function(){
  var data = $(this).attr('data');
  $('.result').text(data);
});

Comments

[Евгений]

в этом случае див result заполнится текстом и текст уже не пропадет. имхо наверное лучше сделать средствами css на hover dislay:block(в этом случае див уже должен быть заполнен текстом и иметь display:none). либо в jquery добавить в вашем коде вторую функцию, которая будет текст убирать. но мне кажется с css было бы проще.

[Danil Namaste]

Евгений: ('img').mouseover(function(){
$('.result').hide();
})

[Евгений]

или так)
$('img').hover(
function(){
var data = $(this).attr('data');
$('.result').text(data);
},
function(){
$('.result').hide();
}
);