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

时间:2014-02-16 13:32:23

标签: css text hover underline

我对如何这样做有点困惑...... 这是我的代码:

<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)下划线...

有什么想法吗?

2 个答案:

答案 0 :(得分: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 spangame_grid img,保持相同的外观,但将HTML缩短50%。

答案 1 :(得分:0)

它们之间有很多元素。所以CSS不容易做到这一点,你可以尝试jQuery:

$('#game_image').hover(function () {
  $('#game_name').css('text-decoration', 'underline');
}
如果他们是同一父元素的兄弟姐妹,那么CSS是可能的。然后你会使用:

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

如果名称是图像元素的直接子元素(虽然这是不可能的),那么您将使用>子选择器。但是在这个阶段,你应该使用jQuery来查询元素。