Make the title underline when hover on image

Question

I've been a bit confusing on how to do so... This is my code:

<div class="game_grid">
   <center><div id="game_name"><a href="game_page.php?id=<?php echo $game_id; ?>"><?php echo $game_name; ?></a><br /></div></center>
   <div id="game_image"><a href="game_page.php?id=<?php echo $game_id; ?>"><img src="images/games_images/<?php echo $game_image; ?>" width="120" height="120" /></a></div>
</div>

I failed to use "text-decoration:underline;" to make the title (game_name) underline when I put my mouse over the game image...

Any idea?

Answer 1

I do not know what is needed and what not in your HTML, so I'll just show a few examples, take a pick.

For example a simple build: http://jsfiddle.net/B6gD4/

Maybe style the image: http://jsfiddle.net/B6gD4/1/

And finally your IDs added if necessary for anything other than styling: http://jsfiddle.net/B6gD4/2/

Simple HTML:

<div class="game_grid">
<a href="game_page.php?id=1">
    <img id="game_img" src="images/games_images/<?php echo $game_image; ?>" width="120" height="120" />
    <span id="game_name">Title</span>
</a>
</div>

CSS:

.game_grid {
  text-align: center;
}
.game_grid a {
  text-decoration:none;
}
.game_grid a:hover {
  text-decoration:underline;
}
.game_grid img {
  /* any styles */
}
.game_grid span {
   display:block;
   font-weight: bold;
}

You can add your div styles to the respective game_grid span or game_grid img, keeping the same look but shortening your HTML by 50%.

Answer 2

There are alot of elements in between them. So CSS won't be easy to do that, you can try out jQuery for this:

$('#game_image').hover(function () {
  $('#game_name').css('text-decoration', 'underline');
}

CSS would have been possible if they were siblings of the same parent element. Then you would have used:

#game_image:hover + #game_name {
  text-decoration: underline;
}

If the name was the direct child of the image element (which is not possible although) then you would have used > child selector. But at this stage, you should use jQuery to query among the elements.