Prevent child element hovering from breaking parent hover - javascript

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/

Related

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

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);
});

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

jQuery/CSS - Whole Div Clickable, on hover activate a tag hover state

I'm trying to make the .wrapper div a clickable link that goes to the a.icon location. Also, when they hover over the .wrapper div the a.icon:hover state actives, not just when you hover over the icon itself.
Any help would be great.
This is what I have so far:
jQuery(document).ready(function($) {
$(".aca-question-container").hover(function() {
$(".icon").trigger("hover");
});
$(".aca-question-container").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output
In HTML5, you can wrap block elements such as your .wrapper div, within anchors. This is a rudimentary version of what I think you're looking for: http://jsbin.com/qegesapore/edit?html,css,js,output
I removed the JS you had there as I'm not sure it's necessary, and obviously some styling will be needing to be tweaked.
There shouldn't be any requirement for JS to achieve this really.
The hover state can still be applied to the icon as per:
.your-anchor:hover .icon {
background: #666;
}
As I commented, you can use jQuery and a class to achieve what you want. Below is the JS: (it must be inside the onload function)
$('div#wrapper').mouseenter(function(){
$('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
$('a.icon').removeClass('hover');
});
And, you must not forget, in your CSS you have to replace a.icon:hover with a.icon:hover, a.icon.hover, so that it emulates the hover state when the class is added. Like this:
a.icon:hover, a.icon.hover{
//CSS GOES HERE
}
For the CSS portion- propagating the hover is pretty easy. Just use .wrapper:hover .icon
as the hover effect selector. You can drop .icon:hover, too, since the parent is hovered when the child is hovered.
As for propagating the click down to it... also easy without jQ.
.wrapper:hover .icon{
color:#f00;
}
<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
icon
testit
</div>
The error generated is the "there's not stackoverflow.com/google.com" error, showing that the link was followed. Slap https:// in front of the href and pull it out of an iframe and you'll be able to fully see it works.
EDIT:
bsod99's fix is cleaner. So long as you can rearrange the DOM and don't need to support ancient relics (pre-HTML5 spec browsers, like Firefox <3.5) (which you probably don't have to do), use his instead.

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