Как сделать так, чтобы при наведении курсора на раздел цвет плавно переходил в другой, как на скриншоте:

1:

при наведении:

<table id="mytable" border="1">

<tr>

    <td>1</td>

    <td>2</td>

    <td>3</td>

    <td>4</td>

    <td>5</td>

</tr>

<tr>

    <td>6</td>

    <td>7</td>

    <td>8</td>

    <td>9</td>

    <td>10</td>

</tr>

<tr>

    <td>11</td>

    <td>12</td>

    <td>13</td>

    <td>14</td>

    <td>15</td>

</tr>

</table>



<script type="text/javascript" src="__code.jquery.com/jquery.min.js"></script>

<script type="text/javascript">

    $("#mytable td").mouseover(function() {

        var tds = $( this ).parent().find("td"),

           index = $.inArray( this, tds );

 

        $("#mytable td:nth-child("+( index + 1 )+")").css("background-color", "#f00");

    }).mouseout(function() {

        var tds = $( this ).parent().find("td"),

            index = $.inArray( this, tds );

 

        $("#mytable td:nth-child("+( index + 1 )+")").css("background-color", "#fff");

    });

</script>

jack007,куда это пихать? 

А куда надо вам я ж не знаю.

<script type="text/javascript" src="__code.jquery.com/jquery.min.js"></script>

<script type="text/javascript">

    $("#mytable td").mouseover(function() {

        var tds = $( this ).parent().find("td"),

           index = $.inArray( this, tds );

 

        $("#mytable td:nth-child("+( index + 1 )+")").css("background-color", "#f00");

    }).mouseout(function() {

        var tds = $( this ).parent().find("td"),

            index = $.inArray( this, tds );

 

        $("#mytable td:nth-child("+( index + 1 )+")").css("background-color", "#fff");

    });

</script>

Этот скрипт отвечает за выделение, а то что выше это пример, собственно то что вам нужно, возьмите в рамку как показано на примере, а в этом скрипте поменяйте названия на свои. Вот и все.