Solved

show positioned div on mouseover

Posted on 2014-04-19
9
288 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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

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