在 Twitter 网站上，一条推文包含一个 48 像素的方形头像、一个显示名称(如 Fred Q. Fish)和一个帐户名称(如 @fredfish)。
这三个东西被“组合”在一起，因此将鼠标悬停在其中任何一个上都会产生悬停效果。悬停的唯一视觉反馈是显示名称改变颜色并获得下划线。
整个“组”也是一个链接，其中任何都可以单击。
我一直在尝试仅使用 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>
最佳答案
这就是你想要的吗？更改了您的 .group:hover。 Fiddle
.group:hover .fullname {
text-decoration:underline;
color:#090;
}
关于html - 类似 Twitter 的头像/用户名链接突出显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35326300/