Is there a quicker way doing this???

Is there a quicker way doing this???

Ok on my page I have 4 boxes (div elements), inside each box is a title (h3 element) when you mouseover the box the H3 goes a different color (pretty simple eh).

It iterates through each box, maybe there is a quicker way, using (this) maybe?

The code I have doing it is:

  1. $(document).ready(function() {
        // TOP LEFT
        $(".box-tl").mouseover(function() {
            $(".box-tl > h3").css("color", "#7FD6F7");
        });
        $(".box-tl").mouseleave(function() {
            $(".box-tl > h3").css("color", "#ffffff");
        });
       
        // TOP RIGHT
        $(".box-tr").mouseover(function() {
            $(".box-tr > h3").css("color", "#7FD6F7");
        });
        $(".box-tr").mouseleave(function() {
            $(".box-tr > h3").css("color", "#ffffff");
        });
       
        // MIDDLE
        $(".box-middle").mouseover(function() {
            $(".box-middle > h3").css("color", "#7FD6F7");
        });
        $(".box-middle").mouseleave(function() {
            $(".box-middle > h3").css("color", "#ffffff");
        });
       
        // BOTTOM LEFT
        $(".bottom-left").mouseover(function() {
            $(".bottom-left > h3").css("color", "#7FD6F7");
        });
        $(".bottom-left").mouseleave(function() {
            $(".bottom-left > h3").css("color", "#ffffff");
        });
       
        // BOTTOM RIGHT
        $(".bottom-right").mouseover(function() {
            $(".bottom-right > h3").css("color", "#7FD6F7");
        });
        $(".bottom-right").mouseleave(function() {
            $(".bottom-right > h3").css("color", "#ffffff");
        });
    });