我对如何这样做有点困惑...... 这是我的代码:
<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)下划线...
有什么想法吗?
答案 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 span
或game_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来查询元素。