如何确保标题在悬停图像时显示用户名？

Question

如何使标题属性显示用户名（不同的标签），同时将鼠标悬停在图片上？

<div class="profile">
    <img class="image" src="images/7.png" title="here - that it will show the tag value">
    <div class="names-row">
        <p class="name">User</p>
        <p class="tag">@username</p>

Answer 1

一般来说，如果您可以访问生成它的服务器端，那么解决方案是将title属性也添加到您的img中。 然而，由于您没有在问题标签中指定任何服务器端技术，因此我将在此答案中假设您不能采用该选项，并且您需要为此目的使用 Javascript。 这是一个例子：

 for (let profile of document.getElementsByClassName("profile")) { profile.querySelector("img.image").title = profile.querySelector(".tag").innerText; }

 <div class="profile"> <img class="image" src="https://th.bing.com/th/id/OIP.of-rlOxjEVIV6srGE0dLTQHaEo?pid=ImgDet&rs=1" title="here - that it will show the tag value"> <div class="names-row"> <p class="name">User</p> <p class="tag">@username</p> </div> </div> <div class="profile"> <img class="image" src="https://th.bing.com/th/id/OIP.aetZEH1Rp6Pknak9-7BCXwHaFj?pid=ImgDet&rs=1" title="here - that it will show the tag value"> <div class="names-row"> <p class="name">User2</p> <p class="tag">@username2</p> </div> </div>

在上面的代码片段中，我添加了两个配置文件来说明即使同一页面上有多个配置文件，代码也能正常工作。

Answer 2

您可以通过标题属性轻松地在悬停图像时显示用户名。 我们也可以称它为工具提示。 在您的示例中，配置文件没有数据。 因此，首先我将数据 object 用于配置文件。 然后只需将用户名放入标题属性即可。

例子：

const profileInfo = {
  username: "Tanjim Hasan",
  tag:      "profile",
  src:      "images/7.png"
}

<div class="profile">
    <img class="image" src={profileInfo.src} title={profileInfo.username}>
    <div class="names-row">
        <p class="name">{profileInfo.username}</p>
        <p class="tag">{profileInfo.tag}</p>    
    </div>
</div>

希望它会帮助你。 :)

Answer 3

使用 javascript :)

如果只使用 css，

1. 鼠标对父层的影响
2. 在子层上做某事

像下面的 css

.names-row:hover p {
    opacity: 1;
}

 const imagebtn = document.querySelector('.image') imagebtn.addEventListener('pointerover', () => { document.querySelector('.name').style.opacity = 1 document.querySelector('.tag').style.opacity = 1 })

 * { padding: 0; margin: 0; box-sizing: border-box; }.tag { opacity: 0; }.name { opacity: 0; }

 <div class="profile"> <img class="image" src="https://picsum.photos/id/237/200/300" title="here - that it will show the tag value"> <div class="names-row"> <p class="name">User</p> <p class="tag">@username</p> </div> </div>

Answer 4

只是为了说清楚......你想让图像 hover 说“用户名”还是用户插入的实际用户名？