When on hover the red box, the grey box will show up. if the mouse stay on grey box, the grey box stays opened. When move the mouse from grey box back to the red box, I want to have the grey box still opened.
Grey box only closes when mouse is not hovered on red or grey box.
http://jsfiddle.net/0sLhL0xf/
The only problem is that, when I move mouse from grey box back to red box, I can't get grey stayed to show.
Can someone please help? please do not change structure, I understand to have box2 wrapped by box1 is easier,
<div id="box1">
<div id="box2"></div>
</div>
but this isn't what I wanted to try. Thanks
Try utilizing css
#box1 {
width: 40px;
height: 40px;
background: red;
cursor:pointer;
}
#box2 {
display:none;
width: 400px;
height: 400px;
background: grey;
}
#box1:hover + #box2, #box2:hover {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="box1"></div>
<div id="box2"></div>
jsfiddle http://jsfiddle.net/0sLhL0xf/3/
I think you can use
var timeout;
var $box1 = $('#box1');
var $box2 = $('#box2');
$box1.hover(function() {
clearTimeout(timeout);
$box2.show();
}, function() {
timeout = setTimeout(function() {
$box2.hide();
}, 1000);
});
$box2.hover(function() {
clearTimeout(timeout);
}, function() {
timeout = setTimeout(function() {
$box2.hide();
}, 1000);
});
#box1 {
width: 40px;
height: 40px;
background: red;
cursor: pointer;
}
#box2 {
display: none;
width: 400px;
height: 400px;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box1"></div>
<div id="box2"></div>
Here's another solution using mouseenter & mouseleave.
http://jsfiddle.net/0sLhL0xf/2/
var $boxes = $('.boxes');
var $box1 = $('#box1');
var $box2 = $('#box2');
$boxes.mouseenter(function() {
$box2.show();
});
$boxes.mouseleave(function() {
$box2.hide();
});
#box1 {
width: 40px;
height: 40px;
background: red;
cursor:pointer;
}
#box2 {
display:none;
width: 400px;
height: 400px;
background: grey;
}
<div class="boxes" id="box1"></div>
<div class="boxes" id="box2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
I have a div2 that fades away after 3 seconds and appears again on div1 or itself hover.
The problem is that it fades away again after 3 seconds and I want it to remain active while the mouse is over it.
Here's my code:
$(document).ready(function(){
// div2 fades away after 3s
setInterval(function(){
$(".div2").addClass("fade-away");
}, 3000);
// div2 pops up on hover
$(".div1, .div2").hover(function(){
$(".div2").removeClass("fade-away")
});
});
.div1 {
width: 300px;
height: 200px;
background: pink;
}
.div2 {
position: absolute;
width: 300px;
height: 50px;
margin-top: -70px;
background: lightblue;
opacity: 1;
}
.fade-away {
opacity: 0;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div class="div1"></div>
<div class="div2"></div>
Is there a way to make the div2 remain active while the mouse is over it with javascrit and css only? Sorry for my english.
You can use a boolean flag to do it.
Set the boolean to true when mouseenter and set it to false on mouseleave event.
https://jsfiddle.net/ramseyfeng/0nc2bw8f/
$(document).ready(function() {
let mouseIn = false;
// div2 fades away after 3s
setInterval(function() {
if (!mouseIn) {
$(".div2").addClass("fade-away");
}
}, 3000);
$('.div1').on('mouseenter', () => {
mouseIn = true;
});
$('.div1').on('mouseleave', () => {
mouseIn = false;
});
// div2 pops up on hover
$(".div1, .div2").hover(function() {
$(".div2").removeClass("fade-away")
});
});
.div1 {
width: 300px;
height: 200px;
background: pink;
}
.div2 {
position: absolute;
width: 300px;
height: 50px;
margin-top: -70px;
background: lightblue;
opacity: 1;
}
.fade-away {
opacity: 0;
}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div class="div1"></div>
<div class="div2"></div>
Here is a quick and easy way to do it.
You can do it by hovering over any class, I just did it in text for the example.
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
<body>
<h2>Display an Element on Hover</h2>
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
</body>
Notice how if you onmousedownover the div, it turns from green to red. This is expected. But if you hold the mouse down and drag your cursor off and away from the div, then let go of your mouse, onmouseupwon't function because the cursor is no longer hovering over the div. The div remains red instead of returning to its initial green state.
Should I use onmousemove?
Any ideas how to solve this?
function mouseDown() {
document.getElementById("test").style.backgroundColor = "red";
}
function mouseUp() {
document.getElementById("test").style.backgroundColor = "green";
}
#test {
position: absolute;
height: 50px;
width: 100px;
background-color: green;
}
<div id="test" onmousedown="mouseDown()" onmouseup="mouseUp()">
</div>
function mouseDown() {
document.getElementById("test").style.backgroundColor = "red";
document.getElementsByTagName("BODY").onmouseup = function() {mouseUp()};
}
function mouseUp() {
document.getElementById("test").style.backgroundColor = "green";
}
#test {
position: absolute;
height: 50px;
width: 100px;
background-color: green;
}
<body>
<div id="test" onmousedown="mouseDown()" onmouseup="mouseUp()"
onmouseout="mouseUp()">
</div>
</body>
you should use onmouseout() which allow you to change content when mouse leave element.
here is a link for more info
or you shoud use mouseup with parent element in our case div element with id=full look here
function mouseDown() {
document.getElementById("test").style.backgroundColor = "red";
}
function mouseUp() {
document.getElementById("test").style.backgroundColor = "green";
}
#test {
position: absolute;
height: 50px;
width: 100px;
background-color: green;
}
#full{
width: 100%;
height: 2000px;
background: blue;
}
<body>
<div id="full" onmouseup="mouseUp()" >
<div id="test" onmousedown="mouseDown()" onmouseup="mouseUp()">
</div>
</div>
</body>
I have a box, that is draggable, inside this box I have another box, that contains text. I want to be able to be able to select the text but also to drag/drop parent. The problem I have is, how can I show selection, when leaving box with text? Right now selection highlight is disappearing when I mouse is out, and appear again, when mouse is over again. Here's the code. Select a text and leave green square.
const innerBox = document.getElementById('inner');
const outerBox = document.getElementById('outer');
innerBox.addEventListener('mouseover', () => {
outerBox.setAttribute('draggable', false);
});
innerBox.addEventListener('mouseout', () => {
outerBox.setAttribute('draggable', true);
});
* {
box-sizing: border-box;
}
#outer {
padding: 1rem;
width: 10rem;
height: 10rem;
background-color: red;
}
#inner {
width: 100%;
height: 100%;
background-color: green;
}
<div id="outer" draggable="true">
<div id="inner">Select me!</div>
</div>
Try adding user-select:auto to the inner box!
const innerBox = document.getElementById('inner');
const outerBox = document.getElementById('outer');
innerBox.addEventListener('mouseover', () => {
outerBox.setAttribute('draggable', false);
});
innerBox.addEventListener('mouseout', () => {
outerBox.setAttribute('draggable', true);
});
* {
box-sizing: border-box;
}
#outer {
padding: 1rem;
width: 10rem;
height: 10rem;
background-color: red;
}
#inner {
width: 100%;
height: 100%;
background-color: green;
user-select:auto
}
<div id="outer" draggable="true">
<div id="inner">Select me!</div>
</div>
I tried to find any solution but I coudn't find.
I have some images that each one is on the other.I want that when I mouseover the first image the images that behnd will be above the first image.
For example:
Normal:
Mouseover:
In the basic the second and the third image is behind the first image.
Sorry for my english and thanks in advance!
You can use jQuery's hover event function with the over and out handlers..
Begin with the boxes that are "behind" the first box - hide them.
Next define an onhover event to display them when mouse is hovering, and to hide them again when mouse is out of hover.
$('#1').hover(
function(){
$('.hidden').removeClass('hidden').addClass('visible');
},
function(){
$('.visible').removeClass('visible').addClass('hidden');
}
)
.box {
border: solid 2px black;
width: 40px;
height: 40px;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="3" class="box hidden">3</div>
<div id="2" class="box hidden">2</div>
<div id="1" class="box">1</div>
This solution requires the boxes to be absolutely positioned and in a container.
var prop = "bottom",
moveAmount = 50;
$('.container').hover(
function() {
var moved = $(this).find(".box");
for (var i = (moved.length - 1), pad = 0; i >= 0; i--) {
$(moved[i]).css(prop, (pad++ * moveAmount) + "px");
}
},
function() {
var moved = $(this).find(".box");
for (var i = 0; i < moved.length; i++) {
$(moved[i]).css(prop, "0px");
}
}
);
.container {
background-color: #eeeeee;
position: relative;
width: 45px;
height: 45px;
}
.box {
background: red;
width: 40px;
height: 40px;
transition: bottom 0.3s ease-in-out;
position: absolute;
bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br>
<div class="container">
<div class="box">3</div>
<div class="box">2</div>
<div class="box">1</div>
</div>
How do I allow the user to click on the button that says "click me" appears on mouseenter of another button.
Here is the code -
<div class="hint"> ?</div>
<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button>
</div>
$(document).ready(function() {
var hint = $('.hint');
var desc = $('.desc');
hint.mouseenter(function() {
desc.show();
});
hint.mouseleave(function() {
desc.hide();
});
});
Here is the Demo
Just Place the .desc inside the .hint.
Fiddle
For the basic tooltip, you want:
<div title="This is my tooltip">
For fancier tooltips, See this
Wrap your html with another div and add mouseenter and mouseleave event to this.
var con = $('.container');
var desc = $('.desc');
con.mouseenter(function() {
desc.show();
});
con.mouseleave(function() {
desc.hide();
});
.hint {
padding: 20px;
background: white;
width: 10px;
height: 10px;
border-radius: 50%;
}
.desc {
display: none;
width: 200px;
background: white;
z-index: 3;
border: 1px solid #CCC;
border-radius: 3px;
top: 20px;
left: -5px;
padding: 12px;
color: #666;
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="hint"> ?</div>
<div class="desc">
This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover
<button type="button">
Click me
</button>
</div>
</div>
Make the .desc div a child of your .hint
$(document).ready(function() {
var hint = $('.hint');
var desc = $('.desc');
hint.mouseenter(function() {
desc.show();
});
hint.mouseleave(function() {
desc.hide();
});
});
.hint {
padding: 20px;
background: white;
width: 10px;
height: 10px;
border-radius: 50%;
text-align: center;
position: relative;
}
.desc {
display: none;
width: 200px;
background: white;
z-index: 3;
border: 1px solid #CCC;
border-radius: 3px;
top: 20px;
left: -5px;
padding: 12px;
color: #666;
font-size: 12px;
position: absolute;
top: 50%;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hint"> ?<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button>
</div></div>
See fiddle
Updated Fiddle.
If you can't change the structure of your HTML code try to wait a little before hidding a desc div using setTimeout() so if the user enter mouse inside this div you will not hide it by clearing the timeout check the example bellow :
$(document).ready(function() {
var hide_timeout;
var hide_after = 100; //100 ms
var hint = $('.hint');
var desc = $('.desc');
hint.mouseenter(function() {
desc.show();
});
hint.mouseleave(function() {
hide_timeout = setTimeout(function(){
desc.hide();
},hide_after);
});
desc.mouseenter(function() {
clearTimeout(hide_timeout);
});
desc.mouseleave(function() {
desc.hide();
});
});
Hope this helps.
$(document).ready(function() {
var hide_timeout;
var hide_after = 100; //100 ms
var hint = $('.hint');
var desc = $('.desc');
hint.mouseenter(function() {
desc.show();
});
hint.mouseleave(function() {
hide_timeout = setTimeout(function(){
desc.hide();
},hide_after);
});
desc.mouseenter(function() {
clearTimeout(hide_timeout);
});
desc.mouseleave(function() {
desc.hide();
});
});
.hint {
padding: 20px;
background: white;
width: 10px;
height: 10px;
border-radius: 50%;
}
.desc {
display: none;
width: 200px;
background: white;
z-index: 3;
border: 1px solid #CCC;
border-radius: 3px;
top: 20px;
left: -5px;
padding: 12px;
color: #666;
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hint"> ?</div>
<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button>
</div>
You have 2 options
1 - You can add the show() and hide() when the tooltip is hover : Fiddle
2 - You can use only css to show or hide it. Not sure you need JS for simple things like that.
This Demo shows what I think you want to achieve. The trick is to also catch the event that is triggerd, when the mouse enters a other element.
$('*').not('.hint').not('.desc').not('.desc>button').mouseenter(function() {
desc.hide();
});
$(function(){
$('.desc').hide();
$(document).on('mouseenter','.hint',function(){
$('.desc').show();
})
});