jquery - 使用十六进制值和变量改变 jquery 中的 .css 渐变-6ren

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

转载作者：行者123 更新时间：2023-11-28 09:21:43

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

这是我的 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-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)"});
}
);

});

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

最佳答案

按下面的按钮查看实际效果。

你很接近。每行都是这样的:

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

关于jquery - 使用十六进制值和变量改变 jquery 中的 .css 渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26070871/

文章推荐： jquery - 在 Internet Explorer 中定位的 Unslider 问题

文章推荐： html - css3 中的功能区从一侧到另一侧

文章推荐： jquery - 使用 AJAX 获取隐藏的 div

文章推荐： html - 试图在右侧获得与左侧相同的效果 [css3 ribbons]

jQuery - 将主体背景(css 渐变)淡入另一个 CSS 渐变
我使用 jQuery 已经有一段时间了，但我不知道如何从一个渐变渐变到另一个渐变。我一直在用 http://www.colorzilla.com/gradient-editor/对于我的渐变。例如 b
java - 渐变 + 想法 : can not resolve systemProperty in build. 渐变
为了使用 jni 帮助程序库运行测试，我将这样的代码添加到 build.gradle 中: def jniLibDir = "xxx" tasks.withType(Test) { syste
渐变 wsimport
我正在从命令行运行 wsimport 以从 WSDL 生成 java 类，如下所示。 wsimport -J-Djavax.xml.accessExternalDTD=all -J-
gradle - 在构建过程中将使用的第三方组件的位置(渐变)
我们有一个重复使用第3方 war 的项目(如果有人要求，则为shindig-server-2.0.2.war :)。这场 war 目前位于项目根目录中，当前的ant任务将其解压缩到temp文件夹中，进
python - 在python中的蒙版外的图像上添加模糊/渐变
我有一个边界框，其坐标由(x，y，w，h)给出，其中x和y是框的左上角坐标。我想在盒子外面应用模糊或渐变。如何使用上面的坐标创建蒙版，并使用类似于下图的PIL或cv2在蒙版之外应用此效果？最佳答案
javascript - 动态改变元素背景(渐变)
考虑情况http://codepen.io/anon/pen/JdGYBN 我需要在拖动元素时动态更改卡片“可拖动”的背景颜色。但是卡片的背景应该根据线条的渐变颜色而变化。 background:
javascript - 渐变/不透明度解决方法
我现在有这种情况:JSFIDDLE 我想实现这种效果，但我希望文本可以在渐变后面选择，并且即使我将鼠标放在文本上也可以滚动文本。是否有任何解决方法可以使用 javascript 来改变滚动时文本的不
html - CSS如何实现多重背景+渐变？
这段代码是我从css graident generator得到的，渐变底部是透明的 background: -moz-linear-gradient(top, rgba(248,246,247,1)
两部分图像上的 CSS 渐变
我必须使用 CSS 完成以下图像: 这是一张包含主导航的图像。所以我为此写了一些 CSS(我知道不是正确的颜色代码): #menu-block { background: #730868; b
渐变内的 CSS 渐变
是否可以使用渐变作为渐变中的一种颜色？为了我的特定目的，我有一个从左到右的初始渐变: linear-gradient(to right, red, darkgray); 但我希望深灰色部分实际上是从
CSS 背景过渡 - 渐变
我这辈子都想不通为什么 transition 属性在我的 CSS 中不起作用。这是代码: #header #menu-top-nav ul li a { -webkit-transition:
html - 元素顶部和底部的阴影/渐变
我一直在寻找像下图中那样的多组件日期选择器，但在 Github 或其他地方找不到任何东西。所以我决定做一个。我在实现 CSS 时遇到问题，它在顶部和底部淡出。我想过在容器中使用:before和:a
具有多个停止点和边框的 CSS 渐变
我正在寻找与下图等效的 css。我正在使用多个停止点，但很难获得硬停止点 solid 2px white 边框。如果我添加它，它看起来像是一个渐变而不是硬边。任何帮助都会很棒，谢谢! .stripes
图片的 CSS 渐变
我的广告部门给了我一些图像，将其放在网站上的选项卡等。但是我确信这会减慢页面的呈现速度。所以我想我会用 css 来做。然而，经过几次试验，我无法接近以下图像。对于这两张图片，我将不胜感激。请删除这个
html - 在悬停其他元素时更改主体背景图像/渐变
我试图在将鼠标悬停在 div (id="above") 上时更改 body 的背景图像/渐变，我按照他们在另一篇文章 (http://stackoverflow.com/questions/14623
css - 渐变 - 跨浏览器一致性
我正在测试所有浏览器的渐变兼容性，我发现渐变在 FireFox 上有不同的效果。请允许我演示测试。代码 body{
内容很少的 CSS 渐变
当我使用渐变时，当内容很少时，渐变会重复出现，我该如何防止这种情况发生？ http://jsfiddle.net/mcqpP/1/ 我可以尝试使用 html { height: 100%; }，但是当
html - 将导航栏颜色混合到背景颜色(渐变？)
我有一个导航栏，它的背景颜色略深。我想要一个从中心到左右两侧的渐变，以便导航栏最右边和最左边的位达到背景颜色。这可能吗？ -->
适用于多种浏览器的 CSS3 渐变
我在 Firefox 中使用了这个 CSS 线性渐变，但在 Safari 和其他浏览器中似乎无法获得相同的结果。它是联系字段的纸状背景。我试过整个 body 和一个特定的元素，这种风格似乎只适用于 F
css - 渐变:半色半透明
我有这行代码背景:线性渐变(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%); 如您所见，它一半是灰色一半是黑色。有没有办法让它的灰

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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