CSS - Position Css Popup At Mouse Pointer?

See here the live version:

jsfiddle.net/nrWug

i want that the menu in the popup is binded ondrag or onresize to the outer popup.

How can i bind these two to make the dialog draggable and resizable?

thanks for your time.

The web page that I am having a problem editing is:
www dot postalstampssale dot com

We are having a problem getting the mouse over effect on the three (3) jpg images in the upper right hand corner.

We have added the appropriate CSS mouse over coding just under the <TITLE> are on the top. We have a;sp added the CSS coding at the end of the page.

However, we can not figure out how to attach the proper coding to each image. The current coding is:
<img src="Images/Canada/Canada_Scott_356_Front.jpg" width="90" height="60" alt="" border="0" align="right">
<img src="Images/Germany/Germany_Scott_65.jpg" width="89" height="62" alt="" border="0" align="right">
<img src="Images/Bermuda/Bermuda_Scott_55.jpg" width="54" height="64" alt="" border="0" align="right">

Can someone please suggest how to modify the above coding.

Thank you in advance.

Hi all,

I have a very simple question.. my mouseover is ALMOST working properly. However when you mouse over the box colour changes, but the text only changes when you are DIRECTLY over the text. How can I fix this? Check the communities drop down for an example of my problem.

Here is my temp site URL:

edit: I can't post links yet?!?! PM me for link

Thanks!

I've been using on MouseOver and such for ages, however I've seen other means of detecting and acting on mouseovers/mouseouts and such. I need to learn how to do this using <div> or <td> elements - I'm not prepared to use <ul> and <li>, I don't understand the concept yet. From what I've seen, I should be able to have something along the lines of #button.over {attributes}. I do not know the details, but in effect, the element's CSS attributes would be automatically changed when a mouseover is detected and an 'over' class is supplied.

Let me know if you need any further information - otherwise, thanks in advance for any insight you may provide.

How can I make this using his image???

charmingwp com / exprecious-wordpress-theme/

The demo and download box??

The picture is Quote:
/wp-content/themes/expose/images/preview gif

I'm trying to get the cells on the left menu to highlight AND become a link on mouse-over. The problem is when I set "a" to display:block; the link text floats to the top of the cell.

What I want is:

td:hover = link I can click
or
tr:hover = link I can click

without my fancy text alignments going awry.

First the CSS then the HTML:


body
{
color: #000000;
}

body.one
{
color: #000000;
background: #FFFFFF;
background-repeat:no-repeat;
background-attachment:scroll;
background-position:top center;
}

table.housing
{
width: 90%;
margin: auto;
margin-top: 60px;
margin-bottom: 200px;
border-style: groove;
border-width: 0px;
border-color: #000000;
}

td.left
{
width: 10%;
}

td.right
{
width: 90%;
}

table.mainmenu
{
margin: 20px 10px 20px 20px;
width: 205px;
height: 300px;
border-spacing: 20px 20px;
background-color: rgba(184,183,151,0.5); /*#b8b797; CCCC66; FFFFA0;*/
border-style: groove;
border-width: 2px;
border-color: #000000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
float:left;
}

td.mainmenu
{

height: 60px;
border-style: solid;
border-width: 1px 0px 1px 0px;
border-color: #000000;
font: bold 1.1em Georgia;
font-variant: small-caps;
background-color: rgba(255,255,255,0.7); /*#FFFFFF; #FFEECC;*/
}

/*td.extra { height: 20%; border-style: none; border-color: #FFFFFF; background-color: #F1FFCC; }*/

table.text
{
width: 100%;
margin: 20px 20px 20px 10px;
border-spacing: 20px 20px;
height: 600px;
background-color: rgba(184,183,151,0.5); /*#b8b797;*/
border-style: groove;
border-width: 2px;
border-color: #000000;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}

td.text
{
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #000000;
background-color: #FFFFFF; /*rgba(255,255,255,0.9);*/
padding: 10px 10px 10px 10px;
}

a
{
color: #000000;
text-decoration:none;
}

a:link { color: #000000; }

a:visited { color: #000000; }

a:hover { color: #000099; background-color: #b8b797;}

a:active { color: #000000; }


The HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>

<HEAD>

<TITLE></TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<META NAME="generator" CONTENT="">
<META NAME="author" CONTENT="">
<META NAME="description" CONTENT="">
<META NAME="keywords" CONTENT="">

<LINK REL="stylesheet" TYPE="text/css" HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/test.css">

</HEAD>


<BODY class="one">

<table class="housing" border="0">

<tr>

<td class="left" align="left" valign="top">
<table class="mainmenu">

<TR ALIGN="center" VALIGN="middle">
<td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/bcconstruction.htm">Home</A></td>
</TR>

<TR ALIGN="center" VALIGN="middle">
<td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Portfolio.htm">Portfolio</A></td>
</TR>

<TR ALIGN="center" VALIGN="middle">
<td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Ideas.htm">Ideas And Information</A></td>
</TR>

<TR ALIGN="center" VALIGN="middle">
<td class="mainmenu"> <A HREF="file://localhost/C:/Users/Paul/Documents/Web%20Page/Contact.htm">Contact</A></td>
</tr>

</table>
</td>

<td class="right">
<table class="text">

<TR>
<TD class="text" align="center" valign="top">


</td>
</tr>

</table>
</td>

</table>

</BODY>
</HTML>

hellow


i want help in a simple code

can u tell me how do it code for this . when mouse become over
link it will have underline while not over dosen't have.



thanks

I'm trying to figure out how to do something that I'm sure is possible in CSS, but I haven't seen an example of it anywhere yet. I would like to create a grid. The boxes in the grid would contain text, and when you mouse-over that box it would change to different text. The idea behind this is that in the top row you would have a problem. Then if you follow the column down from that problem you would see the name of a product, and when you mouseover the name of the product, the text changes from the name of the product to the solution the product offers. Hopefully I didn't convolute that too much. Has anyone seen something like this that might steer me in the right direction?

Hey, as always it seems to work normal with FF. But IE starts moving images when you go over it.

link:
http://www.net-force.com/hotest/a1.html

any suggestions how to fix it so it displays properly in IE? thx!

Hi Guys,

Is there a way to make a DIV invisible in IE but still available for mouse events? I have an arrows image used for navigating a map, I have placed invisible DIV boxes at select places on the arrows image and have various events triggered when these DIV's are clicked, this works fine in FF but in IE (as per usual) if the DIV doesn't have its backgroundColor set then the mouse events don't fire, it is like IE is saying 'the user can't see them therefore they aren't there'. Is there any way around this?

P.S I can't use any kind of opacity (as it will effect the map image below the arrow image) and I have to use DIV's, slicing the image or <map> aren't an option for this.

Cheers,

Chris

Thanks for taking the time to read my question.

When the mouse hovers over a link I would like the background of the link to change color and for a border to show up around the area.

here is what I have. It doesn't work.

any suggestion?

Code:

#menu a:hover {
/*color:#005c00;*/
font-weight: bold;
font-size: 12px;
width: 114;
background-color: green;
border-top: thin white;
border-left: thin white;
border-right: thin black;
border-bottom: thin black;
}

Thanks,

Brad

Ok, i have this side div thats small. I want to be able to mouse-over (hover) over it or if not that click it. When either action is done, than it will reveal a input field attached to that small tab that was hovered, or clicked.

If you need more details or explanation than reply, I cant really explain it but i will try.

Hi there,
I have not done any html/CSS in a LONG time and have just got back into it.
I am having some problems with a drop down, where, when the sub menu is hovered over, it will not go away again until the mouse is moved either up above the menu bar or off the browser page. I would like the sub menu to be hidden when the mouse is off the sub menu item.

An example is here (oops, I can't post a URL)
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-image: url(images/carpet.gif);
	width:100%;
	margin: 0px;
}

#wrapper {
	position: relative;
	margin: auto;
	width:840px;
	top: 20px;
	height: 920px;
}


#index3-03_ {
	position:absolute;
	left:5px;
	top:45px;
	width:840px;
	height:263px;
	background-image: url(images/thinslice.png);
	background-repeat: no-repeat;
	z-index: 2;
	background-position: -66px -142px;
}

#navbar {
	position: absolute;
	top: 31px;
	right: 0px;
	margin: 0;
	padding: 0;
	width: 780px;
	left: 38px;
	height: 37px;
}
#navbar li {
	list-style: none;
	float: left;
	padding-left: 20px;
	font-size: 14px;
}
#navbar li a {
   
   display: block;
	text-decoration: none;
	list-style-type: none;
	list-style: unordered;
	padding-top: 8px;
	padding-right: 16px;
	padding-bottom: 8px;
	padding-left: 5px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	text-decoration: none;
	color: #363795;
	text-align: center;
   }
#navbar li a:hover {
	color: #B00D46;
}

#navbar li ul {
   display: none;  }

#navbar li:hover ul, #navbar li.hover ul {
	position:absolute;
	display: block;
	left:-42px;
	top:-1px;
	width:840px;
	margin: 0;
	background-repeat: no-repeat;
	float: left;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0px;
	z-index: 5;
	clear: none;
	background-image: url(images/fatslice.png);
	background-position: -62px -281px;
	height: 500px;
}

#navbar li:hover li, #navbar li.hover li {
	float: left;
	padding-left: 25px;
	padding-bottom: 25px;
}
#navbar li:hover li a, #navbar li.hover li a {
	color: #363795;
	position: relative;
	left: 125px;
	top: 25px;
}
#navbar li li a:hover {
	color: #B00D46;
	text-align: left;
	position: relative;
	left: 125px;
	top: 25px;
}


#foobar1 {
	position: absolute;
	left: 62px;
	top: 1px;
	clear: both;
}

#foobar2 {
	position: absolute;
	left: 149px;
	top: 1px;
	clear: both;
}
#foobar3 {
	position: absolute;
	left: 32px;
	top: 1px;
	clear: both;
}

-->
</style>

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>


</head>

<body>


    <div id="index3-03_">
      <ul id="navbar"><li><a href="index.html" target="_self">HOME</a></li>
        <li><a href="usage.html" target="_self">THIS IS BROKEN</a>
          <ul>
            <span id="foobar1"><a href="index.html" target="_self">HOME</a></span>
            <span id="foobar2"><a href="usage.html" target="_self">THIS IS BROKEN</a></span>
            <span id="foobar3"><a href="faq.html" target="_self">FAQ's</a></span>
            <li><a href="parents.html" target="_self">PARENTS</a></li>
            
          </ul>
        </li>
        <li> <a href="faq.html" target="_self">FAQ's</a></li>
      </ul>
    </div>
</body>
</html>

any help would be much appreciated

hi

i have a #nav bar which has a drop down on one the <li>'s

i have margin-top: 10px; on the ul li ul so theres a gap between the nav and the dropdown

when the mouse goes over it, the drop down dissapears...is there a way to stop this?

cheers