使用十六进制值和变量在jquery中改变.css渐变

时间：2014-09-27 03:02:33

标签： jquery css variables hex radial-gradients

我在我正在建设的网站的正文中设置了背景渐变。我还创建了一个菜单，其中的项目在悬停时会变为不同的颜色。我想做的是只询问背景渐变的部分，以改变为悬停在其上的菜单项的相同颜色。我已经能够使用JQuery使用预选的十六进制值来改变背景颜色。我想知道是否可以将这些十六进制值与选择“this”或hover-over项的颜色的变量结合使用。如果没有，如果有另一种，或许更简单的方法来解决问题。

这是我的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>

我的相关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);
}

最后，我的JQuery正在进行中：

$(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)"});
}
);

});

因此，例如，我尝试用第一个渐变中的十六进制值“＃e8e8e8”替换预定义的“颜色”变量。

2 个答案:

答案 0 :(得分：0)

我不确定我是否理解这一点，但我很确定做这样的事情是你正在寻找的？

var color = $(this).css("background-color");

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

答案 1 :(得分：0)

按下面的按钮以查看此操作。

你非常接近。每一行都是这样的：

$("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>

<强>更新

我已使用您的新代码更新了上面的代码。您在变量后面的引号中缺少两个逗号，请注意：

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

应该是这样的：

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