Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

show positioned div on mouseover

Posted on 2014-04-19
9
Medium Priority
?
307 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 54

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 54

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 54

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

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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 tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

604 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