How can I use css to hover the mouse over the tip?

Hovering over the tip is a very useful function. When the page layout is limited, we cannot add too much content to the page. When you move the mouse over the tip, you can have a prompt. We can place the related information in the tip, it does not affect the appearance of the page, but can convey information well.

Can we use css to apply div + CSS layout to achieve this effect? In fact, this is very simple. We can create a new span or div and set it to: display: none to hide the content of this label. (For more information about display, see here.) when you move the mouse up, we will display this content. Then locate it. The mouse hover tip effect is achieved.

Hover the mouse over the CSS code of the tip effect instance

The code is as follows:	Copy code
A # tip {position: relative; left: 30px; top: 30px ;} A # tip: link {text-decoration: none; color: # c00; display: block} A # tip: hover {text-decoration: none; color: #000; display: block} A # tip span {display: none ;} A # tip: hover # tip_info { Display: block; Border: 1px dashed # c00; Background: # fff; Padding: 1px; Position: absolute; Top: 0px; Left: 120px; }

The XHTML code of the instance with the mouse hovering over the tip effect

The code is as follows:	Copy code
<A id = "tip" href = "http: //"> 【] <Span id = "tip_info"> Alt = "" width = "200" height = "90"/> </Span> </A>