How to ensure that title shows username on hovering an image?-CodePudding

How do I make it so an title attribute displays the username (different tag), while hovering over a picture?

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

CodePudding user response：

In general, if you have access to the server-side which generates it, then the solution is to add the title attribute to your img as well. Yet, since you have not specified any server-side technologies in your question tags, I will assume in this answer that you cannot take that option and you need to use Javascript for this purpose. Here's an example:

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

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

In the snippet above I added two profiles to illustrate that the code will work even if there are several profiles on the same page.

CodePudding user response：

Use javascript :)

if you only use css,

mouse effect on parent layer
do something on child layer

like below 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 >
        <img  src="https://picsum.photos/id/237/200/300" title="here - that it will show the tag value">
        <div >
            <p >User</p>
            <p >@username</p>
        </div>
    </div>