I can't figure out how to make a fade-in/fade-out effect on a div, without the mouse leaving the div.
I'll try to explain it better:
Mouse enters object
The object fades in
After a delay the object fades out, without the mouse leaving the area.
For example you can do this in jquery:
$('#id').fadeIn(1200).delay(1000).fadeOut(400);
And if you want that on mouse on you could do this:
$('#id').hover(function() {
$('#id').fadeIn(1200).delay(1000).fadeOut(400);
});
That might not be exactly what you want, but I'm sure you can figure it out from there.
You can use the mouseover event then:
$(element).parent().mouseover(function() {
$(element).fadeIn(1200).delay(1000).fadeOut(400);
});
You mouse over on the element, it fades in.
It waits for a second.
It fades out, even if you are on the element.
Snippet
$(function () {
$(".child").css("opacity", 0);
$(".child").mouseover(function () {
$(this).animate({
opacity: 1
}, 1000).delay(1000).animate({
opacity: 0
}, 1000);
});
});
.parent {position: relative; background: #99f; height: 250px;}
.parent .child {position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; background: #ccf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
<p>Stand on me?</p>
<div class="child"></div>
</div>
Related
The background image is an image of an office. The background image will have a few <a> tags where the person can click. For example: there is an <a> tag on a computer that's on the desk. Taking this example, I want to do the following:
Hovering on the <a> tag that is over the computer, will load in a picture of the same office, however, the computer has been outlined with a white line in photoshop (Lets say: img/bureau2). Indicating that it is interactable. Hovering away from this will return it to the original picture which you see when you enter site (img/bureau1)
You can also click on the <a> tag. This will open up another image (img/bureau3).
So far I managed to get the change on hover and click to work. Issue is, hovering away from the <a> tag will cancle the click.
This is what I have so far, how can I tackle this issue?
$(".computerHover").hover(function() {
$("#backgroundImage").attr('src', 'img/bureau2.png');
},
function() {
$("#backgroundImage").attr('src', 'img/bureau.png');
});
$(".computerHover").click(function() {
$("#backgroundImage").attr('src', 'img/bureau3.png');
});
#pagina2 {
width: 100%;
height: 100%;
}
#backgroundImage {
height: 100vh;
width: 100vw;
z-index: 0;
display: block;
}
.computerHover {
width: 105px;
height: 75px;
position: absolute;
right: 28vw;
top: 40vh;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pagina2">
<div id="pagina2Background">
<img id="backgroundImage" src="img/bureau.png">
<div class="computer">
<a class="computerHover"></a>
</div>
</div>
</div>
Seems to me, what you are trying to do, is an image map. But for the sake of your question, I will focus on one particular link.
The reason the click generated image disappears when you move the mouse, is because it is still bound to the previous hover event. The hover method is a shortcut for mouseenter and mouseleave. In order to circumvent that, you need to unbind that event handler.
EDIT:
I reworked my answer to more closely resemble the code in your question. In order to "reset" the image, I would suggest using a link that the user can click to make it less confusing for them.
function switchImage() {
$(".computerHover").hover(function() {
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Computer');
},
function() {
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Office');
});
}
// attach the hover events when page loads
switchImage();
$(".computerHover").on("click", function() {
$(this).off("mouseenter mouseleave");
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=New Background');
});
// reattach hover handlers and set image back to default
$(".reset").on("click", function() {
switchImage();
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Office');
});
#pagina2 {
width: 100%;
height: 100%;
}
#backgroundImage {
height: 100vh;
width: 100vw;
z-index: 0;
display: block;
}
.computerHover {
width: 105px;
height: 75px;
position: absolute;
right: 28vw;
top: 40vh;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="pagina2">
<div id="pagina2Background">
<a class="reset">Start Over</a>
<img id="backgroundImage" src="http://via.placeholder.com/300x300.png?text=Office">
<div class="computer">
<a class="computerHover">Computer</a>
</div>
</div>
</div>
To do what you want you'll need to keep some sort of state that indicates that the user clicked instead of just hover. In the click handler you could add a class or data-* to #backgroundImage element that you later check when you un-hover.
Example codesanbox.
I have read a lot of the questions on here but can't find one that fixes this. I have programmed a div to follow my cursor. I only want it to appear when the cursor is over #backgroundiv. I have got it working but it sometimes randomly flickers on chrome and disappears entirely on firefox. Even more randomly is it sometimes appears to work and then starts flickering. I have tried a variety of things from hover to mouseenter/mouseover but nothing seems to work.
What I want is for #newdot to appear when the cursor is over #backgroundiv and then follow the cursor around the div. Any help would be much appreciated.
//hide dot when leaves the page
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
//tried below too but it doesn't work
/*$(document).ready(function(){
$("#backgroundiv").mouseenter(function(){
$("#newdot").removeClass("hide");
});
$("#backgroundiv").mouseout(function(){
$("#newdot").addClass("hide");
});
}); */
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot"></div>
<div id="backgroundiv"></div>
There is not issue but a logical behavior, when you hover on the blue div you trigger mouseenter so you remove the class and you see the red one BUT when you hover the red one you trigger mouseleave from the blue div thus you add the class and you hide the red one. Now the red is hidden you trigger again the mouseenter on the blue div and you remove the class again and the red div is shown, and so on ... this is the flicker.
To avoid this you can consider the hover on the red box to make the red box appear on its hover when you lose the hover from the blue one.
$(document).ready(function() {
$("#backgroundiv").hover(function() {
$("#newdot").removeClass("hide");
}, function() {
$("#newdot").addClass("hide");
});
});
//div follows the cursor
$("#backgroundiv").on('mousemove', function(e) {
//below centres the div
var newdotwidth = $("#newdot").width() / 2;
$('#newdot').css({
left: e.pageX - newdotwidth,
top: e.pageY - newdotwidth
});
});
#backgroundiv {
width: 400px;
height: 400px;
background-color: blue;
z-index: 1;
}
#newdot {
width: 40px;
height: 40px;
background-color: red;
position: absolute;
z-index: 2;
}
.hide {
display: none;
}
/* Added this code */
#newdot:hover {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newdot">
</div>
<div id="backgroundiv">
</div>
I don't know why suddenly the sidebar moves unintentionally. I'm creating a fixed sidebar that show only when hovered.
When I slowly point the mouse on the parent div #containter element it works fine, but when I move the mouse several times on the parent div element #containter the div shows and hide like insane. And also there an area where the parent div shows even you didn't actually hovered on the parent div.
I'm using this code.
HTML
<div id="containter"><!-- parent div -->
<div class="wrapdownload">
</div>
<div class="wrapdownload">
</div>
<div class="wrapdownload">
</div>
</div>
CSS
#containter {
width: 140px;
height: 282px;
position: fixed;
margin-top: 30px;
left: -104px;
border: 1px solid red;
}
.wrapdownload {
width: 100px;
height: 90px;
border: 2px solid black;
}
JAVASCRIPT
$(document).ready(function() {
$("#containter").mouseenter(function(event) {
$("#containter").animate({
left: "1px"
});
});
$("#containter").mouseleave(function(event) {
$("#containter").animate({
left: "-104px"
});
});
});
When you hover on the parent div for six times the div show 6 times also. I just want it to show when the mouse is pointed on div element and if i move the mouse outside the parent div, it must hide.
Here is the sample on jsfiddle https://jsfiddle.net/py0622ms/6/
Use stop() method:
$(document).ready(function() {
$("#containter").mouseenter(function(event) {
$("#containter").stop().animate({
left: "1px"
});
});
$("#containter").mouseleave(function(event) {
$("#containter").stop().animate({
left: "-104px"
});
});
});
Working fiddle:
https://jsfiddle.net/py0622ms/7/
I have a problem with showing an overlay over my component. Below is the code.
<div className="content">
<div className="main" onMouseEnter={this.mouseOver} onMouseLeave={this.mouseLeaves}>
...
</div>
<div className="overlay" style={this.getOverlayStyle()} ref="overlay">
</div>
</div>
This is the style method:
getOverlayStyle: function() {
return {
display: 'none',
position: 'absolute',
top: '0',
bottom: '0',
left: '0',
right: '0',
zIndex: '100'
};
}
And these are the mouse event handlers:
mouseOver: function() {
this.refs.overlay.style.display = 'block';
},
mouseLeaves: function() {
this.refs.overlay.style.display = 'none';
},
Okay, so, when I hover over the content part, the overlay becomes visible, but it's flickering. When I stop moving the mouse above the content, the overlay is displaying nicely. When I move the mouse again, it flickers again, it's barely watchable, very annoying.
When I try making the overlay visible in the console (just your regular document.getElementsByClassName('overlay')[0].style.display = 'block', it works normally and doesn't flicker. I'm guessing this problem is due to my not yet great React knowledge.
Any ideas why is this happening?
Ps, I tried using a pure CSS solution: selector1 + selector2 { display: block; } and it behaved the same as above.
EDIT, I tried setting the visibility through state (change state on mouse enter and mouse leave), following a recommendation in the comments, but it still flickers when the mouse is moving.
I'm pretty sure you need to move the mouseenter and mouseleave to the .content div, not the .main div
what I expect is happening is this:
you enter main, the overlay is displayed which means the mouse leaves main and enters overlay. because it left main, the overlay is then hidden, and when the overlay is hidden, the mouse reenters main causing the cycle to rinse and repeat
although really this can be accomplished with css selectors. is there a reason you want to do this in react?
There is a pure css solution to this (codepen)
.content {
position: relative;
}
.main {
background-color: #0d0;
min-height: 30px;
min-width: 30px;
}
.overlay {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
zIndex: 100;
background-color: #d00;
}
.content:hover .overlay {
display: block;
}
Hi how may I make a simple mouse over animation to this logo?
What I want is the id logo may come down 300px and inside I will put my links as navigation
<body>
<div class="content">
<div id="logo"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/Google-Wallet-logo.svg/283px-Google-Wallet-logo.svg.png" alt="" /></div>
<h1 class="title">Hello Moto</h1>
</div>
</body>
FIDDLE
Use mouseenter and leave
A working example Fiddle where I move the text around on hover: http://jsfiddle.net/hzbRb/1/
$('#logo').mouseenter(function(){
$('.content > h1').css('marginTop','30px')
}).mouseleave(function(){
$('.content > h1').css('marginTop','0px')
});
modify this CSS
#logo {
background: #f8b133;
width: 200px;
height: 200px;
max-height: 500px !important; // this is critical!!
margin: 0 auto;
z-index: 1;
}
jQuery
$("#logo").on('mouseover', function () {
$("#logo").animate({
opacity: 0.95,
height: "+=300"
}, 250, function () {
// Animation complete.
// Show Navigation
});
});
$("#logo").on('mouseleave',function () {
// Hide Navigation
$("#logo").animate({
opacity: 1,
height : "-=300"
}, 250, function() {
});
});
I gave it a little opacity so your navigations might show up a bit better and you'll notice I use the .one() delegation so it doesn't continue to move down every time you mouseover.
AFTER EDIT Animations will run a bit faster now and you'll have the ability to hover and leave as many times as is needed rather than being limited to once, as long as you change the CSS.
working jsFiddle