css - 将鼠标悬停在图像上时使标题下划线

我对如何做感到有些困惑...
这是我的代码：

<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>

我无法使用“ text-decoration：underline;”当我将鼠标放在游戏图像上时，使标题（game_name）下划线...

任何想法？

最佳答案

我不知道需要什么，而您的HTML中不需要什么，所以我只展示一些示例，请选择。

例如一个简单的构建：http://jsfiddle.net/B6gD4/

也许设置图像样式：http://jsfiddle.net/B6gD4/1/

最后，如果需要，除了样式外，还可以添加您的ID：http://jsfiddle.net/B6gD4/2/

简单的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;
}

您可以将div样式添加到相应的game_grid span或game_grid img中，保持外观不变，但将HTML缩短50％。