Question

在Twitter网站上，推文包含48px方形头像，显示名称（如Fred Q. Fish）和帐户名称（如@fredfish）。

这三件事是＆＃34;分组＆＃34;因此，任何一个鼠标悬停都会导致悬停效果。悬停的唯一视觉反馈是显示名称改变颜色并获得下划线。

整个＆＃34;组＆＃34;也是一个链接，其中可以点击任何。

我一直试图仅使用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>

Answer 1

这就是你要追求的吗？更改了您的.group:hover。 Fiddle

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

类似Twitter的头像/用户名链接突出显示

1 个答案: