gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:25:32 24 4
gpt4 key购买 nike

在 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:hoverFiddle

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

关于html - 类似 Twitter 的头像/用户名链接突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35326300/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com