Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Carl Youngman
2,138 PointsHelp with Div Show/Hide
I'm trying to show/hide a div upon mouse over another div. I have "Div Block1MORE" showing and hiding as it should when having the mouse over "Div Block1", but I also want the div to stay showing when the mouse is on "Div Block1MORE".
<script>
$(document).ready(function(){
//Hide the div upon page load
$('#Block1MORE').hide();
});
//When the div is hovered upon, show the hidden div $('.Block1').hover( function() {
$('#Block1MORE').show("fast");
});
//When the mouse moves, Hide the div $('.Block1').mouseleave( function() {
$('#Block1MORE').hide("fast");
});
</script>
Also, I am using CSS
.Block1:hover { width:212.5px; height:180px;
}
to make the div extend down, anyway to keep the block extending when the user is also hovering over "Div Block1MORE"?
hope that made sense, i'm sure the answer is simple.
Thanks Carl
10 Answers
James Barnett
39,199 PointsI don't think that's possible with CSS. My understanding is you can only write a selector for the element that currently has focus (e.g. the one you are hovering over). You can't say "if I'm inside this div, then transition this child element"
However it's easy to do in a few lines of JQuery, check it out:
http://codepen.io/barnettjw/pen/kqiHG
see also:
<morbo>Transititions Do Not Work That Way</morbo>
reference: http://www.youtube.com/watch?v=ZQg8JKo_3ZQ
James Barnett
39,199 PointsTo make it easier to help you, post a "working" example using codepen.io.
Carl Youngman
2,138 Points
James Barnett
39,199 PointsA couple of things about codepen.io:
- No code inside the head tags is parsed
- The only JavaScript that is parsed is code which is pasted into the JavaScript section
- No external scripts (JavaScript or CSS) are parsed, however it does havee built-in support for normalize.css and JQuery among others.
Currently your code isn't particularly readable, work on cleaning up the formatting and seperating out the JavaScript into it's own section.
Carl Youngman
2,138 PointsSorry about that, It was a quick copy and paste job:
http://codepen.io/joe/pen/mBwyI
It didn't seem to want to work unless I kept the link for jq in the html section.
James Barnett
39,199 PointsIt's actually a simple fix, just add an inner-div, check out my solution:
http://codepen.io/barnettjw/pen/wJida
Also compare and contrast how easy it is to read and troubleshoot the code in the first codepen and the codepen in this post.
One final note, most browsers ignore fractional pixels.
Carl Youngman
2,138 PointsArr do the JS to the wrapper.
Thank you very much.
James Barnett
39,199 Points@Carl - Anytime, let us know if you have any more questions.
Carl Youngman
2,138 PointsA bit more help with my CSS please.
http://codepen.io/joe/full/akGdA
http://codepen.io/joe/pen/akGdA
I'm using transition to join the small block to the big box on hover but I want it to stay extended when over the inner div.
Also, I repeated the JS code four times as im unsure how to add different attributes to the same script. =(
ecp
838 PointsBookmarked + saved to Instapaper. Thanks James :D