Menu
Hi: got some html like:
<div class="class" > <div class="class" > </div> </div> And some css like:
div.class:hover { border-width:2px; border-style:inset; border-color:red; } When I hover over the inner div, both divs get the red border. Is it possible to stop the propagation and get the red border on the inner div using css?
Thanks.
EDIT : starting with the answer pointed to by borrible I ended up with:
$("div.class").mouseover( function(e) { e.stopPropagation(); $(this).css("border-color", "red"); }).mouseout( function() { $(this).css("border-color", "transparent"); }); Shame it's not css but does the job. Thanks everyone, didn't get what I wanted but learned lots of new stuff. Ain't stack overflow great :)
525
if we define 2 HTML elements where we want to hover over one element & at the same moment want to change the style of another element then both the elements should be directly related as either parent-child or sibling, which indicates either one element must be inside another element or both elements should be within ...
Basically you want to apply a negative scale on hover. so you apply the positive scale to the parent div and a negative scale to the child.
To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.
Have a look at http://jsfiddle.net/n6rzA/
Code from there:
<div class="c"> <div class="c"></div> </div> .c:hover {border:solid 1px red} .c > .c:hover {border:solid 1px green} If the inner class is immediate child you can use the >. If it's not immediate child you can use space.
So in first case .class > class:hover { } and in second case .class .class:hover { }
First case : http://jsfiddle.net/wp4Jf/
Second case : http://jsfiddle.net/wp4Jf/2
Keep in mind that > works for ie8+
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
