jQuery: changing up the css

gistfile1.html

<article>
    <h2>Yet another headline</h2>
    <a class="read-more" href="#">read more...</a>
    <div class="more">
        <p>Another tasty story...</p>
    </div>
</article>

<article>
    <h2>Even another headline!!!!</h2>
    <a class="read-more" href="#">read more...</a>
    <div class="more">
        <p>This story is flippin amazin.</p>
    </div>

</article>


<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
    $('.read-more').on('click', function() {
        $(this).closest('article').find('.more').slideDown();
        return false;
    });

    $('h2').on('mouseover', function() {
        $(this).closest('article').find('.read-more').css({'font-size': '16px'});
    });

</script>