Trying to get a simple popup to appear on mouseover a div I followed the answer Description Box using "onmouseover" but it doesn't work. What am I missing?
<!DOCTYPE html>
<head>
<style>
.parent .popup {
display: none;
}
.parent:hover .popup {
display: block;
}
</style>
</head>
<body>
<script type="text/javascript">
var e = document.getElementById('#parent');
e.onmouseover = function() {
document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('popup').style.display = 'none';
}
</script>
<div id="parent">
This is the main container.
<div id="popup" style="display: none">some text here</div>
</div>
</body>
</html>
There are a few problems. You are referencing classes in the CSS (. is class and # is id) second, you don't need to overload the CSS display none style. Finally, you don't need the JavaScript in this case.
See the working example.
<!DOCTYPE html>
<head>
<style>
#parent #popup {
display: none;
}
#parent:hover #popup {
display: block;
}
</style>
</head>
<body>
<div id="parent">
This is the main container.
<div id="popup">some text here</div>
</div>
</body>
</html>
Related
Say I have 2 divs, positioned side by side (with some intermediate elements between them): A (left) and B(right). When hovering over B, I wish to have another div(C) appear over the left one (A).
I know how to toggle the display none/block properties but I don't know how to write the condition so the div C can appear on another div, not the one that we're hovering over.
Can this be done?
<div className="A">
<h2>About me</h2>
</div>
<div className="B">
<div>
<Link className="link1-to-project" to="/project1">
<h2>Project 1</h2>
<div className="C"></div>
</div>
codeply demo here
Html
<div id="a">
Div A
<div id="c">Div C</div>
</div>
<div id="b">Div B</b>
css
#a, #b{
float:left;
height:100px;
width:100px;
color:#fff;
background-color:#ffcc66;
margin:10px;
text-align:center;
}
#c{
background-color:#000;
margin:10px;
visibility:hidden;
}
Javascript
document.getElementById("b").addEventListener("mouseover", mouseOver);
document.getElementById("b").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("c").style.visibility = "visible";
}
function mouseOut() {
document.getElementById("c").style.visibility = "hidden";
}
UPDATE:
https://jsfiddle.net/mq5bza81/1/
https://jsfiddle.net/mq5bza81/
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<style>
.wrapper {
position: relative;
}
.b:hover+.c {
display: block;
}
.c {
display: none;
position: absolute;
top: 0;
}
</style>
<div class="wrapper">
<div class="a">AAA</div>
<div class="b">BBB</div>
<div class="c">CCC</div>
</div>
</body>
</html>
In the following example all the 3 divs with class ".container2" are hidden by default. When I click an h2, the div next to it shall open (which is happening) but when I click the h2 again, the div is not closing but remains open. Please, help me out why it is not getting toggled?
Example:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
* {margin:0px;padding:0px;}
h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
.container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>
<script>
$(document).ready(function(){
$('.container2').hide();
$('h2').click(function(){
$('.container2').hide();
$(this).next().toggle();
});
});
</script>
</head>
<body>
<h2>Set-I</h2>
<div class="container2">123</div>
<h2>Set-II</h2>
<div class="container2">456</div>
<h2>Set-III</h2>
<div class="container2">789</div>
</body>
</html>
NOTE: At a time I only want maximum 1 div to open. If I remove
$('.container2').hide() then more than 1 divs might open at a time,
which I don't want!
What you need is this line:
$('.container2:visible').not($(this).next()).hide();
This change will do the intended behavior.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
h2 {
background: #000;
color: #fff;
margin: 10px;
border-radius: 4px;
padding: 5px 10px;
}
.container2 {
background: yellow;
color: #000;
margin: 0px 10px;
padding: 2px 10px;
}
</style>
<script>
$(document).ready(function() {
$('.container2').hide();
$('h2').click(function() {
$('.container2:visible').not($(this).next()).hide();
$(this).next().toggle();
});
});
</script>
</head>
<body>
<h2>Set-I</h2>
<div class="container2">123</div>
<h2>Set-II</h2>
<div class="container2">456</div>
<h2>Set-III</h2>
<div class="container2">789</div>
</body>
</html>
Hide all but the current toggled one
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
* {margin:0px;padding:0px;}
h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
.container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>
<script>
$(document).ready(function(){
$('.container2').hide();
$('h2').click(function(){
var container2 = $(this).next();
$('.container2').not(container2).hide();
container2.toggle();
});
});
</script>
</head>
<body>
<h2>Set-I</h2>
<div class="container2">123</div>
<h2>Set-II</h2>
<div class="container2">456</div>
<h2>Set-III</h2>
<div class="container2">789</div>
</body>
</html>
You will need to do that in two steps.
step 1: hide all h2 divs.
step 2: only toggle the current next() h2 div.
and you should do it with a callback function passed to .hide() to guarantee that it will only be executed after the function has finished hiding the other divs.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
* {margin:0px;padding:0px;}
h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
.container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>
<script>
$(document).ready(function(){
$('.container2').hide();
$('h2').click(function(){
var btn = $(this).next();
$('.container2').hide(function(){
btn.toggle();
});
});
});
</script>
</head>
<body>
<h2>Set-I</h2>
<div class="container2">123</div>
<h2>Set-II</h2>
<div class="container2">456</div>
<h2>Set-III</h2>
<div class="container2">789</div>
</body>
</html>
Morning,
I'm trying to display a div onmouseover. I created a function but i don't know what is wrong. Could you help me please.
The HTML code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title> PHOTOGALLERY</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="css/smoothness/jquery-ui-
1.9.2.custom.css"/>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js">
</script>
<script>
function show_img_container() {
$("#image_container").css("display", "block");
}
</script>
</head>
<body>
<div id="div_container">
<div id="div_image" class="cycle-slideshow">
<img src="images/2.jpg" style="height:100%; width:100%">
<img src="images/3.jpg" style="height:100%; width:100%">
<img src="images/4.jpg" style="height:100%; width:100%">
<img src="images/5.jpg" style="height:100%; width:100%">
</div>
<div id="image_container" onmouseover="show_img_container()"></div>
</div>
</body>
</html>
In the css file i have a image_container id where the attribute display is set to 'none';
If you only want to show the <div> on hover you wouldn't need any JS you could try someting like this:
div {
display: none;
}
a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
To explain further:
Since you're using display: none; on the container the mousehover won't take affect since the <div> can't be found by the event since it's not displaying in the first place.
Hope this helps!
I'll answer based on what OP has provided. wrap the #image_container with a div that contains the function, then it should work.
And since it's quite weird that something appeared when hovered but didn't disappear after hovering out, I added another function for onmouseout
function show_img_container() {
$("#image_container").css("display", "block");
}
function hide_img_container() {
$("#image_container").css("display", "none");
}
#image_container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover="show_img_container()" onmouseout="hide_img_container()">
HOVER ME!!
<div id="image_container">IM HIDDEN!!!</div>
</div>
In the css file i have a image_container id where the attribute display is set to 'none';
It is not possible to hover a none blocked element.
You can use the opacity attribute to hide your div.
div {
opacity: 0;
}
div:hover {
opacity: 1;
}
<div>Stuff shown on hover</div>
You cant hover on div if its display is sets to none.
Ok. I know the problem. In the css stylesheet i had this:
#image_container {
position: absolute;
height: 120px;
width: 100%;
bottom: 5%;
background-color: black;
opacity: 0;
**transition: all 0.3s ease-in-out 2s;**
z-index: 1;
}
#image_container:hover {
opacity: 1;
}
If i delete the transition attribute it works:`
Could you show me why?
I have been making a website-resume and I want the user to be able to click on a picture of a company I've worked for and have a description of my work experience come up. I can click on a picture and have a div pop up on top as shown here:
Any ideas on how this could be done?
you can set css to the popup div which u want to show over the html page.
Consider the following eg:
#mainPage {
width: 100%;
height: 100%
}
#popUp {
display: none;
z-index: 100;
width: 200px;
height: 50px;
background: #ADD;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="mainPage">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" width="20%" />
</div>
<div id="popUp">
<p>Hello !!! It's a popup div </p>
</div>
</body>
<script type="text/javascript">
$(function() {
$('#mainPage img').on('click', function() {
$('#popUp').show();
});
});
</script>
</html>
<html>
<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script>
var username = document.getElementById('username');
var menu = document.getElementById('menu');
function show_or_hide()
{
if(menu.style.display!='block') menu.style.display='block';
else menu.style.display='none';
}
username.addEventListener('click', show_or_hide);
</script>
<style type='text/css'>
#dropdown
{
background: #eee;
color: steelblue;
display: inline-block;
}
#username
{
padding: .5em 1em;
}
#username:hover
{
background: #eef;
cursor: pointer;
}
#menu
{
display: none;
padding: .5em 1em;
}
</style>
</head>
<body>
<div id='dropdown'>
<div id='username'>dropdown#fiddle.net</div>
<div id='menu'>
<div>menu item a</div>
<div>menu item b</div>
<div>menu item c</div>
<div>menu item d</div>
</div>
</div>
</body>
</html>
I tried the above jsfiddle example... it worked fine on the jsfiddle site, but when I tried implementing the exact code on my site, I had no luck. Is there a library I need to include? If so, which one? Thanks! My goal is to make a dropdown menu like the one on Gmail for Gmail, Contacts, and Tasks.
Firebug says username is null...
Put the javascript code below the html code. It will work.
If you load the jquery library, you may as well go even more simple ..
$(document).ready(function () {
$("#username").click(function () {
$("#menu").toggle();
})
});
http://jsfiddle.net/djwave28/DVttJ/11/
try this. I have changed your code. Please check it. it is working fine in both.
http://jsfiddle.net/DVttJ/3/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#dropdown
{
background: #eee;
color: steelblue;
display: inline-block;
}
#username
{
padding: .5em 1em;
}
#username:hover
{
background: #eef;
cursor: pointer;
}
#menu
{
display: none;
padding: .5em 1em;
}
</style>
<script type="text/javascript">
var username = '';
var menu = '';
window.onload=function(){
username = document.getElementById("username");
menu = document.getElementById("menu");
username.addEventListener("click", show_or_hide);
}
function show_or_hide()
{
if(menu.style.display!="block") menu.style.display="block";
else menu.style.display="none";
}
</script>
</head>
<body>
<div id="dropdown">
<div id="username">dropdown#fiddle.net</div>
<div id="menu">
<div>menu item a</div>
<div>menu item b</div>
<div>menu item c</div>
<div>menu item d</div>
</div>
</div>
</body>
</html>