?
Solved

show positioned div on mouseover

Posted on 2014-04-19
9
Medium Priority
?
300 Views
Last Modified: 2014-04-20
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
0
Comment
Question by:St_Aug_Beach_Bum
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
9 Comments
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 40010976
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
 
LVL 27

Expert Comment

by:skullnobrains
ID: 40011031
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 40011318
I don't think  visibility:hidden works either at least on chrome and firefox

http://jsbin.com/wotox/2/edit
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 27

Expert Comment

by:skullnobrains
ID: 40011345
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
 
LVL 27

Expert Comment

by:skullnobrains
ID: 40011349
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
 

Author Closing Comment

by:St_Aug_Beach_Bum
ID: 40011360
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
 

Author Comment

by:St_Aug_Beach_Bum
ID: 40011363
Thank you for offering up a solution too, skullnobrains. I know you put some work into that, I appreciate the help!
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 40011368
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
 
LVL 27

Expert Comment

by:skullnobrains
ID: 40011417
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

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question