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

Question

我一直对如何做到这一点感到困惑...... 这是我的代码:

<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;”当我将鼠标放在游戏图像上时，使标题(游戏名称)下划线...

有什么想法吗？

Answer 1

我不知道您的 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%。