Welcome to WebmasterWorld Guest from 54.226.62.26

Forum Moderators: open

Message Too Old, No Replies

mouseover popup script

     

whatson

3:01 pm on Jun 6, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I am looking for a mouseover popup script for text to appear when the cursor is over an icon.

I have found some, but they are not right. I want to make sure that when the text pops up, that it doesn't move with the cursor, and stays in a permanent position. Of course it also needs to disappear when the cursor moves off.

birdbrain

3:53 pm on Jun 6, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there whatson,

this can be achieved quite simply with CSS...

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>CSS pop-up</title>

<style>
body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:100%;
background-color:#fcfcfc;
}
#container {
width:960px;
margin:auto;
}
#hover-item {
position:relative;
cursor:pointer;
}
#hover-item span {
display:none;
position:absolute;
top:0;
left:20px;
z-index:1;
width:200px;
padding:10px;
border:1px solid #630;
border-radius:5px;
background-color:#fdb;
box-shadow:4px 4px 4px #999;
font-size:75%;
color:#630;
cursor:default;
}
#hover-item:hover span {
display:block;
}
</style>

</head>
<body>

<div id="container">

Hover over this...

<span id="hover-item">

<img src="http://www.webmasterworld.com/theme/default/gfx/wilk.gif" alt="">

<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis.
</span>

</span>

...to see some hidden text displayed.

</div>

</body>
</html>

birdbrain
 

Featured Threads

Hot Threads This Week

Hot Threads This Month