Twitter-like頭像/用戶名鏈接突出顯示

在推特網站上，tweet包含48px方形頭像，顯示名稱（如Fred Q. Fish）和帳戶名稱（如@fredfish）等。Twitter-like頭像/用戶名鏈接突出顯示

這三件事情被「分組」，以便任何一個鼠標懸停導致懸停效果。懸停的唯一可視反饋是顯示名稱改變顏色並獲得下劃線。

整個「組」也是一個鏈接，其中其中任何一個都可以被點擊。

我一直在試圖複製這種行爲，只使用HTML5和CSS沒有成功。（沒有JavaScript。）有什麼想法？

（編輯）我的嘗試。除了用戶名被加下劃線之外，這可以做我想做的一切。

<!DOCTYPE html> 
<style> 
.group { 
    text-decoration:none; 
    color:#009; 
} 
.group:hover { 
    text-decoration:underline; 
    color:#090; 
} 
.avatar { 
    float:left; 
    width:48px; 
    height:48px; 
    border-radius:5px; 
    margin-right:10px; 
} 
.fullname { 
} 
.username { 
    text-decoration:none; 
    color:#999; 
} 
</style> 
<a class="group" href="#"><img class="avatar" src="sample.jpg" alt=""> 
    <strong class="fullname">Fred Q. Fish</strong> 
    <span class="username">@fredfish</span> 
</a>

來源

2016-02-10 Timothy B.

編輯後顯示我的例子。 –

這是你在追求什麼？更改了你的.group:hover。 Fiddle

.group:hover .fullname { 
    text-decoration:underline; 
    color:#090; 
}

來源

2016-02-10 21:53:41 Maverick976

這很完美。謝謝！我不明白CSS類可以這樣堆疊。 –

不客氣，很高興幫助！ – Maverick976

Twitter-like頭像/用戶名鏈接突出顯示

回答

相關問題