Display <div> when hovering over another div and its children - javascript

I have a HTML div and inside it has children.
I have a jQuery mouseover event attached to the div. Upon mouseover, I display another div and on mouseout, I hide it.
However when I mouseover the "premiumlink" div, all works well, but when I move my mouse over a child of the div, the div that is conditionally displayed hides, but then jQuery figures out that the parent div is still being hovered over, so it shows it again. Then if I move my cursor back to the parent div, the div is hidden then shown again.
How can I have the mouseover and mouseout apply to all children and not this jumpy state?
Here is my HTML
<div class="platinumlevel" id="premiumlink">
<h1>
<img src="~/Content/Images/colorworld.png" alt="Logo" class="eventimage" />
Company Name
</h1>
<div id="demopreview" style="display: none;">
I should be displayed when "premiumlink" and all it's children are mouseovered
</div>
</div>
JS
$("#premiumlink").mouseover(function () {
$('#demopreview').show(1000);
}).mouseout(function () {
$('#demopreview').hide(1000);
});

Change your event from mouseover to mouseenter en mouseout to mouseleave. These work way better and in pretty much all the major browsers.
MDN Documentation on support
This is the code you'll need:
$("#premiumlink").mouseenter(function () {
$('#demopreview').show(1000);
}).mouseleave(function () {
$('#demopreview').hide(1000);
});
If you don't want to use JavaScript and jQuery for this, the same can be done with CSS:
#demopreview {
display: block
transition: all 1s linear;
}
#premiumlink:hover #demopreview {
display: block
}

As Douwe de Haan says, you should use mouseenter and mouseleave instead of mouseover and mouseout respectively.
$('#premiumlink').on('mouseenter', function(e) {
$('#demopreview').show(100);
});
$('#premiumlink').on('mouseleave', function(e) {
$('#demopreview').hide(100);
});

Related

Is there a way to disable the css hover through javascript?

I have a parent element and its child element.
Currently the child is hidden and appears when you hover over the parent and disappears when you're no longer hovering over the parent, using css.
I need it so that the child element doesn't disappear when you move outside the parent element IF the mouse button is held down.
So I need to disable the hover if the mouse button is held down and then re-enable it on mouseup.
This is for a draggable element that needs its child element, the handle, visible when mousedown.
I need to do it without jquery and other libraries.
EDIT: woops... didn't see the "without jquery" part... my bad, left my jquery answer just in case and added a Without JQuery answer lower down
You can add a specific class that enables the hover css like this:
.parentElement.hoverCSS:hover {
.childElement {
display: none;
}
}
And then using jQuery you do this:
$(".parentElement")
.on("mousedown", function() {
$(".parentElement").removeClass("hoverCSS");
})
.on("mouseup", function() {
$(".parentElement").addClass("hoverCSS");
})
This adds an event on mousedown which removes the class hoverCSS which will remove the css that hides the child. The second event on mouseup re-adds the class which will re-enable the hiding of the child element on hover of the parent
WITHOUT JQUERY
Another way to do this WITHOUT jQuery or any kind of javascript for that matter (kind of a hack but it will work) is to change your parent element to a button and use the :active CSS like this:
.parentElement.hoverCSS:hover {
.childElement {
display: none;
}
}
.parentElement.hoverCSS:hover:active {
.childElement {
display: block;
}
}
Since the button is active when the mouse is being held down, this will display the child element

Mouseenter called multiple times

I'm building a website, and for the about page, I have pictures that I want to fade to 0.5 opacity and then have text fade in on top if them. My issue is that whenever I put my mouse over one of the images, it, and the text on top of it fades in and out multiple times. Here's a link to the section of my code I'm having trouble with. The issue only occurs if you're moving your mouse over the image from outside of the containing div.
My jQuery:
$(document).ready(function() {
$('.fade').mouseenter(function() {
$(this).fadeTo(150, 0.5);
$(this).siblings().fadeIn(150);
}).mouseleave(function() {
$(this).fadeTo(150, 1);
$(this).siblings().fadeOut(150);
});
});
I've noticed that when I remove the second line of code in both mouseenter and mouseleave that it resolves the issue. I've tried mouseover, hover, stopPropogation, I've looked through all of these:
mouseenter event called twice even after stopPropagation
Mouseover and mouseleave trigger every time I move the mouse inside the given element
JS mouseenter triggered twice
JQuery mouseover function firing multiple times
How to stop toggle event from being fired multiple times on mouseenter/mouseleave?
jquery mouseover event firing twice
Jquery mouseenter() vs mouseover()
and tried everything they suggested but so far nothing has worked for me. Any ideas?
What is happening is you are fading in the elements over the image which interferes with the mouseover listener. So when you hover over the image, it begins to fade, but when the elements fade in, then it blocks the cursor from the image and triggers a mouseout event then it repeats once the elements go away.
I think the quickest way to handle this is to give the container of the image the class of fade, that way the siblings don't interfere with the mouseover listener.
You could change the markup to:
<div id="image-wrapper" >
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<img src="http://placehold.it/158x210"/>
<h3 class="bio bio-header" style="display:none;">Header</h3>
<p class="bio bio-footer" style="display:none;">Information</p>
</div>
</li>
</ul>
</div>
and the javascript to:
$(document).ready(function() {
$('.fade').mouseenter(function(ev) {
$(this).fadeTo(150, 0.5);
$(this).find('img').siblings().fadeIn(150);
}).mouseleave(function() {
$(this).fadeTo(150, 1);
$(this).find('img').siblings().fadeOut(150);
});
});
fiddle: https://jsfiddle.net/oLckb6h3/2/
The problem is the elements positioning, you are trying to overlay the images sibling, which interferes with the hover event on the image. To fix this try calling the hover state on a parent such as the "tile" class, and editing the CSS to position the text over the image using z-index and positioning.
$(document).ready(function() {
$('.tile').mouseenter(function() {
$(this).children('img').fadeTo(150, 0.5).siblings().fadeIn(150);
}).mouseleave(function() {
$(this).children('img').fadeTo(150, 1).siblings().fadeOut(150);
});
});
ul {
list-style-type:none;
}
.bio {
padding:15px;
}
.bio-header {
margin-top:-150px;
}
.tile { display: inline-block;}
.tile > img { z-index: 0; position: relative; }
.tile > .bio { z-index: 1; position: relative; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-wrapper">
<ul id="team-members">
<li class="tile-wrapper">
<div class="tile">
<img src="http://placehold.it/158x210" class="fade" />
<h3 class="bio bio-header" style="display:none;">Header</h3>
<p class="bio bio-footer" style="display:none;">Information</p>
</div>
</li>
</ul>
</div>

Prevent child element hovering from breaking parent hover

So let's say I have a parent div element that has an img child and that I want to execute some code when the parent element is hovered.
<div class="parent">
<img src="link_to_some_image" />
</div>
The issue here is that when the child img is hovered, the parent "hover state" breaks. How can I make it so that the parent keeps its hovered state even if its child elements are hovered?
Here is an example jsfiddle, try hovering on the empty space and then on the image http://jsfiddle.net/omrf0dxe/
Thanks a lot!
Edit: The img children is an example, it might be other type of elements as well like divs,links etc
Edit2: Ok, apparently the solution was to use mouseleave instead of mouseout when binding the "exit" event.
You are listening to the events mouseenter/mouseout.
You want the events mouseenter/mouseleave:
Example Here
$(".parent").on("mouseenter mouseleave", function () {
$(this).toggleClass('hovered');
});
As an alternative, you could also add pointer-events: none to the child img element in order to essentially remove mouse events from the element:
Updated Example
.parent > img {
pointer-events: none;
}
Depending on what you're trying to achieve, you may not even need JS, though.
Just use the :hover pseudo class.
Example Here
.parent {
width:400px;
height:400px;
background:blue;
}
.parent:hover {
background:red;
}
Pretty basic solution, not sure if you want yours to stay toggled, but I would attack it with a add/remove class.
$('.parent').hover(
function(){ $(this).addClass('hovered') },
function(){ $(this).removeClass('hovered') }
)
http://jsfiddle.net/omrf0dxe/7/

How to make an underlaying element unclickable/deactive?

I have two elements on top of each other. When I click a button on the first div, the second div opens on top of the first div, and what I want to do is to make the underlaying div non-interactive (That I can't click on anything on the underlaying-div as long as the overlaying-div is open).
Javascript code:
$('#button').live('click', function()
{
$('#underlaying-div).fadeTo("fast", 0.7);
$('#overlaying-div).css('display', 'block');
//Do something here to make the underlaying div unclickable
});
$("#overlaying-div").live("click", function() {
$(this).hide();
$('#underlaying-div).fadeTo("slow", 1.0);
//Do something here to make the underlaying div clickable again
});
CSS-code:
#overlay-div
{
position:absolute;
left:0;
top:0;
display:none;
z-index: 20000;
}
I know I can use event.preventDefault() to make sure nothing happens if you click on an element in the underlaying-div, but I'd rather want that nothing happens at all when you for instance hover over an button (with preventDefault(), hover and other stuff still happens).
Any other ways in CSS or javascript/JQuery that can fix this problem??
Not sure of your final product, but if the underlaying div get overlapped by the overlaying in a way that the underlaying div is not visible anymore you could just display:block; the underlaying div.
This is a very old question, but if someone happens upon it, you might find it useful to toggle the pointer-events CSS property of the object you want to disable. You won't need to manually remove click bindings or add any other wrappers. If an object has pointer-events set to 'none', no events will fire when it is clicked.
In jQuery:
$('#underlaying-div).css('pointerEvents', 'none'); // will disable
$('#underlaying-div).css('pointerEvents', 'auto'); // will reenable
You could use unbind to remove the click event handler like this:
$(this).unbind('click'):
My concern is if this works with a live bind but you should at least try it :)
Why don't you use jQuery .fadeIn() and .fadeOut() functions? You have two divs with id="div1" and id="div2" and you have a button in div1 with id="button1" and a button in div2 with id="button2".
CSS code:
#div1 {
//some CSS code without z-index
}
#div2 {
//some CSS code without z-index
visibility:hidden;
}
jQuery code:
$('#button1').click(function(){$('#div1').fadeOut('slow', function(){$('#div2').fadeIn()})})
$('#button2').click(function(){$('#div2').fadeOut('slow', function(){$('#div1').fadeIn()})})

Hover over image to show buttons and don't trigger when hovering over actual buttons

I'm trying to get buttons to appear when hovering over an image. The following works:
jQuery('.show-image').mouseenter(function() {
jQuery('.the-buttons').animate({
opacity: 1
}, 1500);
}).mouseout(function() {
jQuery('.the-buttons').animate({
opacity: 0
}, 1500);
});
However, when moving from the image to the button (which is over the image), the mouseout/mouseenter is triggered, so the buttons fade out then fade back in (the buttons have the same class as the image, otherwise they just stay faded out). How can I prevent this from triggering? I've also tried the above code using jQuery's hover; same results. Here's a detail of the image showing the button with opacity 1 (because I'm over the image):
http://i.stack.imgur.com/egeVq.png
Thanks in advance for any suggestions.
The simplest solution is to put the two in the same parent div and give the parent div the show-image class.
I like to use .hover() to save a few key strokes. (alll hover does is implement .mouseenter() and .mouseleave(), but you don't have to type them out)
Additionally it's very imporant to fade $(this).find(".the-buttons") so that you only change the button in the hovered over div otherwise you would change all of the .the-buttons on the entire page! .find() just looks for descendants.
Finally, .animate() will work, but why not just use .fadeIn() and .fadeOut()?
JS:
jQuery(function() { // <== Doc ready
jQuery(".the-buttons").hide(); // Initially hide all buttons
jQuery('.show-image').hover(function() {
jQuery(this).find('.the-buttons').fadeIn(1500); // use .find() !
}, function() {
jQuery(this).find('.the-buttons').fadeOut(1500); // use .find() !
});
});
Try it out with this jsFiddle
HTML: - Something like this
<div class="show-image">
<img src="http://i.stack.imgur.com/egeVq.png" />
<input class="the-buttons" type="button" value=" Click " />
</div>​
CSS: - Something like this. Yours will likely be different.
div {
position: relative;
float:left;
margin:5px;}
div input {
position:absolute;
top:0;
left:0; }​
Put the image and the button in the same div, then put the mouseover/mouseout events on the div. Than whether your mouse is over either the button or the image, it will still be over the div.
Also I am not sure if mouseenter(...).mouseout(...) will work. I always use hover(..., ...)

Categories

Resources