show positioned div on mouseover

I'd like to put a div in the top right side of a browser window and only show it on mouseover.

So starting with something like this:

<div style="position: fixed;top: 33px;right: 1px;">Here is the text I want to show when a user <br>mouses over the top right of the browser window</div>

I want to display it only when it's moused over.

How do I go about doing that?

Thanks,

Chris
St_Aug_Beach_BumAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
http://jsbin.com/wotox/1/edit
<!DOCTYPE html>
<html>
<head>
   <style>
   .topright{
     position: fixed;
     top: 33px;
     right: 1px;
     color:white;
   }
  .topright:hover{color:black;}
   </style>

  
  <meta charset="utf-8">
  <title>padas Q_28416249</title>

</head>
<body>
<div class="topright">Here is the text I want to show when a user <br>mouses over the top right of the browser window</div>
</body>
</html>

Open in new window

0
 
skullnobrainsCommented:
i'd go for

.topright {
  visibility:hidden;
}
.topright:hover {
  visibility:visible;
}

don't use display:none/block which will not work on some browsers (because when the display is none, the element is removed entirely so it never gets hovered)
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I don't think  visibility:hidden works either at least on chrome and firefox

http://jsbin.com/wotox/2/edit
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
skullnobrainsCommented:
it used to, apparently, it now works erratically at best (i tried the reverse way)

this idiotic hack works fine in my firefox 28, chromium and a few others (luakit, xxxterm, i do not have IE around)

<!DOCTYPE html>
<html>
<head>
   <style>
   .topright{
     position: fixed;
     top: 33px;
     right: 1px;
   }
.topright div{
  position:relative;
  top:-300px;
}
.topright:hover div{
 top:0;
}
   </style>
<script src="http://code.jquery.com/jquery-git1.js"></script>
  
  <meta charset="utf-8">
  <title>padas Q_28416249</title>

</head>
<body>
<div class="topright"><div>Here is the text I want to show when a user <br>mouses over the top right of the browser window</div></div>
</body>
</html>

Open in new window


i'm starting to wonder wether it's not better to use jquery
$('.topright').hover(function(){$(this).show()},function(){$(this).hide()});
0
 
skullnobrainsCommented:
this one is less hacky and seems to work reliably in chrome and FF

<style>
   .topright{
     position: fixed;
     top: 33px;
     right: 1px;
   }
.topright div{
  visibility:hidden;
}
.topright:hover div{
 visibility:visible;
}
   </style>
  
<div class="topright"><div>Here is the text I want to show when a user <br>mouses over the top right of the browser window</div></div>

Open in new window


for some reason the hover does not trigger properly on hidden elements any more
0
 
St_Aug_Beach_BumAuthor Commented:
Simple and brilliant! Can't tell you how many complex/complicated scripts I looked at before coming here. I knew it shouldn't be that complicated. You hit it perfect!
0
 
St_Aug_Beach_BumAuthor Commented:
Thank you for offering up a solution too, skullnobrains. I know you put some work into that, I appreciate the help!
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I find many times as I struggle with something,  my solution keeps getting more and more complex. The hardest thing to do is cut loose, step back and take a breather, then start over.   Working with HTML and CSS should not be complex and when it is, that is a great clue there is an easier way.
0
 
skullnobrainsCommented:
your view is the correct one : solutions have to be simple and stuff that rely on hacky browser-specific behaviour are both prone to fail some day and a major pita to maintain. unfortunately, they are all over the web, including for stuff that could actually be done simply.

keep my solution for when you'll need this to work with a background, and don't bother about the work : knowing that the visibility property does not work like it used to (or the way i remembered) is well worth 3 minutes of my time ;)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.