HTML mouse hover hyperlink (avatar, text) display prompt information

tags: html

In the hyperlink plus a title, the double quotation is the information to display. My code is $ {param.username} is an EL statement, can be replaced with any or delete you want to add

In <· a> <./ a>, you can add any hover, hyperlinks, pictures, etc. you want to set.

<a href="#" title="$ {param.username} Personal Center" 
		style="text-decoration:none"><img src="D: \ picture \ yes.jpg"></a>

Avatar:

Avatar's CSS
.head-img {
    	width: 40px;
    	height: 40px;
    	background-color:#efff;padding: 3px;
    	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    	margin: 0 auto 10px;
    	box-sizing: border-box;
    	border-radius: 50%;
    	}  
    .head-img img {
    	display: block;
    	width: 40px;
    	height: 40px;
    	border-radius: 50%;
    	}

Insert an example in Body

<div class="head-img">
		<div style="position: absolute; top: 30px; right: 70px; width: 100px; text-align:right;">
		<a href="#" title="$ {param.username} Personal Center" 
		style="text-decoration:none"><img src="D: \ picture \ yes.jpg"></a>		
    	</div>
    	</div>

This is the setting of the avatar position in the upper right corner. It is changed to Bottom to the lower right corner. Right is changed to the left.

<div style="position: absolute; 
top: 30px; right: 70px; width: 100px; text-align:right;">

Intelligent Recommendation

Create a mouse hover display prompt toolbar

These days, I have a reminder, I have checked it online, I have finally come out today, now share it. // If you can't use imagelist_create to add in the header file /#include <Co...

QTableWidget mouse hover display prompt content (Tooltip)

QTableWidget mouse hover display prompt content Tooltip I. Environment and scope of application 2. Implementation Open mouse capture 2. Receive and process signals Three. Specific source code Head fil...

Mouse hover (click) text prompt box appears

The following is the text of the mouse click. If you want to move up in the mouse and remove the disappearance, UI can use the Onpointerenter and Onpointerexit method. The name space is unityEngine.ev...

[Mouse movement to the above automatic display prompt information text]

Mouse move to the above automatic display prompt information text Settings through the TITLE attribute, see below:...

C# form Winform, hover the mouse over the control, prompt box, display information.

Before starting the article, let's look at the next short recording effect. Implementation principle: When the mouse is hovering over the control, another form pops up, which can display different cus...