Question

Right, lets say I have these repeated divs.

<div class="upcoming">
<div class="roll" style="display:none">Hidden</div>
</div>
<div class="upcoming">
<div class="roll" style="display:none">Hidden</div>
</div>
<div class="upcoming">
<div class="roll" style="display:none">Hidden</div>
</div>

This is incorrect, but how do I operate this using jQuery to reveal the “roll” class held inside when hovering over one of those divs.

<script type="text/javascript">
$(document).ready(function() {  
    $(".upcoming").hover(function() {
        $(this + ".roll").fadeIn("Fast");
    }, function() {
        $(this + ".roll).fadeOut("Fast");
    });
});
</script>

Any ideas? 🙂

Answer 1

Use the jQuery(expression, context) form:

$('.roll', this)