使標題下劃線時，圖像

懸停我一直在如何這樣做有點混亂... 這是我的代碼：使標題下劃線時，圖像

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

我沒有用「文本裝飾：下劃線; 「當我將鼠標放在遊戲圖像上時，使標題（game_name）下劃線...

任何想法？

來源

2014-02-16 davidgpilot

你可以做一個JSFiddle嗎？ –

刪除陳舊的'

'標籤。將*文本*（可能位於''元素內）和*圖像*通過**單個**錨點標記''包裝起來，並根據您的樣式將錨點/文本/圖像設置爲正確顯示在頁面上需要。 –

謝謝，我會嘗試 – davidgpilot

我不知道你需要什麼，什麼不在你的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％。

來源

2014-02-16 14:06:47 Marcel

謝謝！完美的作品:)我的朋友幹得好！ – davidgpilot

@davidgpilot不客氣:)現在總是瞄準乾淨的代碼，它使得一切都變得容易（特別是）從長遠來看。 – Marcel

當然，但對於初學者來說，這是我可以得到的最乾淨的:) – davidgpilot

它們之間有很多元素。所以CSS並不容易做到這一點，你可以嘗試jQuery的這個：

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

CSS將是可能的，如果他們是相同的父元素的兄弟姐妹。然後你會使用：

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

如果名字是圖像元素的直接子（這是不可能的，雖然），那麼你會使用>子選擇。但在這個階段，您應該使用jQuery在元素之間進行查詢。

來源

2014-02-16 13:38:16

我想它太複雜了這個簡單的目的，我想我會垃圾這個想法：/謝謝你們。 – davidgpilot

使標題下劃線時，圖像

回答

相關問題