将鼠标悬停在图像上时使标题下划线答案

【问题标题】：Make the title underline when hover on image将鼠标悬停在图像上时使标题下划线
【发布时间】：2014-03-15 17:29:58
【问题描述】：

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

<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;”当我将鼠标放在游戏图像上时，为标题（游戏名称）添加下划线...

有什么想法吗？

【问题讨论】：

你能做一个 JSFiddle 吗？
删除过时的<center> 标签。用 single 锚标记 <a> 包裹 text（可以在 <span> 元素内）和 image 并设置锚的样式/text/image 根据您的需要正确显示在页面上。
谢谢，我试试
我不明白如何对其进行 CSS 处理

标签： css text hover underline

【解决方案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%。

【讨论】：

谢谢！！完美运行 :) 干得好，我的朋友！
@davidgpilot 不客气 :) 现在始终以简洁的代码为目标，从长远来看，它使一切变得容易（尤其是）。
当然，但是对于初学者来说，这是我能得到的最干净的 :)

【解决方案2】：

它们之间有很多元素。所以CSS不会那么容易做到这一点，你可以试试jQuery：

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

如果它们是同一个父元素的兄弟姐妹，CSS 将是可能的。那么你会使用：

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

如果名称是图像元素的直接子元素（虽然这是不可能的），那么您将使用> 子选择器。但在这个阶段，您应该使用 jQuery 在元素之间进行查询。

【讨论】：

我想它对于这个简单的目的来说太复杂了，我想我会放弃这个想法：/谢谢大家。