Solved

show positioned div on mouseover

Posted on 2014-04-19
9
284 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
  • 4
  • 3
  • 2
9 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 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 26

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 52

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
 
LVL 26

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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 26

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 52

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 26

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

707 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now