alter .css gradient in jquery using hex values AND variable

Question

I have set a background gradient in the body of a website I'm building. I also have created a menu the items of which change to distinct colors on hover. What I'd like to do is ask just sections of the background gradient to change to the same color of the menu item that is being hovered over. I have been able to use JQuery to alter the background color using preselected hex values. I wonder if it is possible to define these hex values in combination with a variable that selects the color of the "this", or hovered-over item. And if not, if there is another, perhaps simpler way to solve the problem.

Here is my HTML:

<div id="header">Jane K Callahan &#124; Freelancer Writer</div>
    <hr>
    <div>
        <ul id="menu">
            <li>Portfolio</li>
            <li>Services</li>
            <li>Testimonials</li>
            <li>Blog</li>
            <li>About Jane</li>
            <li>Contact</li>

        </ul>
    </div>

</div>

My relevant CSS:

     html {
    height: 100%;
}

body {
    max-width: 1100px;
    min-width: 800px;
    font-family: Rockwell;
    font-size: 13px;
    font-color: #3a3a3c;
    width: 100%;
    margin: 0;
    height: 100%;
    background: -webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0, #e8e8e8, #ffffff 50%, #f8f8f8, #f0f0f0, #e8e8e8); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top right #ffffff 20%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0, #e8e8e8, #ffffff 50%, #f8f8f8, #f0f0f0, #e8e8e8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top right #ffffff 20%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0, #e8e8e8, #ffffff 50%, #f8f8f8, #f0f0f0, #e8e8e8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to top right #ffffff 20%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0, #e8e8e8, #ffffff 50%, #f8f8f8, #f0f0f0, #e8e8e8); /* Standard syntax */
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#header {
    font-family: Copperplate;
    font-size: 25px;
    font-color: #080808;
    margin-top: 120px;
    margin-left: -50%;
    width: 45%;
    min-width: 500px;
    font-variant: small-caps;
    position: fixed;
}


hr {
    margin-top: 150px;
    width: 45%;
    min-width: 530px;
    margin-left: -100px;
    color: #505050;
    background-color: #505050;
    height: 2px;
    border: grooved 2px;
    box-shadow: 4px 4px 15px 0px rgba(50, 50, 50, 0.75);
    position: fixed;

}

#menu {
    margin-top: 200px;
    margin-left: 90px;
    float: left;
    width: 15%;
    min-width: 150px;
    position: fixed;
}

ul {
    list-style: none;
}

li {
    font-weight: bold;
    padding: 8px 8px 8px 20px;
    border: 1px solid gray;
    margin-bottom: 10px;
}

li a {
    color: inherit;
}

#menu li:nth-child(1) {
    background-color: #333333;
    color: #ffffff;
}

#menu li:nth-child(1):hover {
    background-color: #f16745; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

#menu li:nth-child(2) {
    background-color: #5c5c5c;
    color: #ffffff;
}

#menu li:nth-child(2):hover {
    background-color: #ffc65d; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

#menu li:nth-child(3) {
    background-color: #858585;
    color: #ffffff;
}

#menu li:nth-child(3):hover {
    background-color: #7bc8a4; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}


#menu li:nth-child(4) {
    background-color: #adadad;
    color: #1a1a1a;
}

#menu li:nth-child(4):hover {
    background-color: #4cc3d9; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

#menu li:nth-child(5) {
    background-color: #d6d6d6;
    color: #1a1a1a;
}

#menu li:nth-child(5):hover {
    background-color: #93648d; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

#menu li:nth-child(6) {
    background-color: #ffffff;
    color: #1a1a1a;
}

#menu li:nth-child(6):hover {
    background-color: #404040; 
    color: #ffffff;
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

And finally, my JQuery-in-progress:

$(function() {
$("li").hover(function() {
    var color = $(this).css("background-color");
    $("hr").css({"background-color": color});
    $("body").css({"background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, " + color + "#e0e0e0, #d8d8d8, #d0d0d0, " + color + "#ffffff 50%, #f8f8f8, #f0f0f0, " + color + ")"} /* For Safari 5.1 to 6.0 */
        //{"background:" "-o-radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #f16745"}, /* For Opera 11.1 to 12.0 */
        //{"background:" "-moz-radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #f16745"}, /* For Firefox 3.6 to 15 */
        //{"background:" "radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #f16745"} /* Standard syntax */
    );
},
function() {
    $("hr").css({"background-color": "#505050"});
    $("body").css({"background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0, #e8e8e8, #ffffff 50%, #f8f8f8, #f0f0f0, #e8e8e8)"});
}
);

});

So, for example, I tried to substitute the hex value "#e8e8e8" in the first gradient with the pre-defined "color" variable.

Answer 1

Press the button below to see this in action.

You were pretty close. Each line would be something like:

$("body").css({"background": "-webkit-radial-gradient(#ffffff 70%, #f8f8f8, #f0f0f0, #e8e8e8, " + color + ")"}

$(function() {
  $("li").hover(function() {
      var color = $(this).css("background-color");
      $("hr").css({
        "background-color": color
      });
      $("body").css({
          "background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, " + color + ",#e0e0e0, #d8d8d8, #d0d0d0, " + color + ",#ffffff 50%, #f8f8f8, #f0f0f0, " + color + ")"
        } /* For Safari 5.1 to 6.0 */
        //{"background:" "-o-radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #f16745"}, /* For Opera 11.1 to 12.0 */
        //{"background:" "-moz-radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #f16745"}, /* For Firefox 3.6 to 15 */
        //{"background:" "radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #f16745"} /* Standard syntax */
      );
    },
    function() {
      $("hr").css({
        "background-color": "#505050"
      });
      $("body").css({
        "background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0, #e8e8e8, #ffffff 50%, #f8f8f8, #f0f0f0, #e8e8e8)"
      });
    }
  );

});

html {
    height: 100%;
}

body {
    max-width: 1100px;
    min-width: 800px;
    font-family: Rockwell;
    font-size: 13px;
    font-color: #3a3a3c;
    width: 95%;
    margin: 0;
    height: 100%;
    background: -webkit-radial-gradient(#ffffff 70%, #f8f8f8, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0); /* For Opera 11.1 to 12.0 */
    background: -moz-radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0); /* For Firefox 3.6 to 15 */
    background: radial-gradient(#ffffff 70%, #f8f8f8, #f7f7f7, #f0f0f0, #e8e8e8, #e0e0e0, #d8d8d8, #d0d0d0); /* Standard syntax */
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#header {
    font-family: Copperplate;
    font-size: 25px;
    font-color: #080808;
    margin-top: 120px;
    margin-left: -50%;
    width: 45%;
    min-width: 500px;
    font-variant: small-caps;
    position: fixed;
}


hr {
    margin-top: 150px;
    width: 45%;
    min-width: 500px;
    margin-left: -100px;
    color: #505050;
    background-color: #505050;
    height: 2px;
    border: grooved 2px;
    box-shadow: 4px 4px 15px 0px rgba(50, 50, 50, 0.75);
    position: fixed;

}

#menu {
    margin-top: 200px;
    margin-left: 90px;
    float: left;
    width: 15%;
    min-width: 150px;
    position: fixed;
}

li:nth-child(1) {
    background-color: #333333;
    color: #ffffff;
}

li:nth-child(1):hover {
    background-color: #f16745; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

li:nth-child(2) {
    background-color: #5c5c5c;
    color: #ffffff;
}

li:nth-child(2):hover {
    background-color: #ffc65d; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

li:nth-child(3) {
    background-color: #858585;
    color: #ffffff;
}

li:nth-child(3):hover {
    background-color: #7bc8a4; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}


li:nth-child(4) {
    background-color: #adadad;
    color: #1a1a1a;
}

li:nth-child(4):hover {
    background-color: #4cc3d9; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

li:nth-child(5) {
    background-color: #d6d6d6;
    color: #1a1a1a;
}

li:nth-child(5):hover {
    background-color: #93648d; 
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

li:nth-child(6) {
    background-color: #ffffff;
    color: #1a1a1a;
}

li:nth-child(6):hover {
    background-color: #404040; 
    color: #ffffff;
    -webkit-box-shadow: -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         -9px 3px 15px 0px rgba(50, 50, 50, 0.75);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">Jane K Callahan &#124; Freelancer Writer</div>
    <hr>
    <div>
        <ul id="menu">
            <li>Portfolio</li>
            <li>Services</li>
            <li>Testimonials</li>
            <li>Blog</li>
            <li>About Jane</li>
            <li>Contact</li>

        </ul>
    </div>

</div>

UPDATE:

I've updated the code above with your new code. You were missing two commas in the quoted bits after your variables, co this:

"background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, " + color + "#e0e0e0, #d8d8d8, #d0d0d0, " + color + "#ffffff 50%, #f8f8f8, #f0f0f0, " + color + ")"

should have been this:

"background": "-webkit-linear-gradient(left bottom, #ffffff 20%, #f8f8f8, #f0f0f0, " + color + ", #e0e0e0, #d8d8d8, #d0d0d0, " + color + ", #ffffff 50%, #f8f8f8, #f0f0f0, " + color + ")"