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：

Use javascript :)

if you only use css,

1. mouse effect on parent layer
2. 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>

CodePudding user response：

Just to make it clear... Do you want the image hover to say "username" or the actual username the user inserts?