我有一个 PHP/HTML 应用程序，用户可以在其中选择他们想要的背景颜色。它保存在 ini 文件中，并在重新加载页面时使用。
现在，用户希望对许多不同用户操作元素的“悬停”颜色做同样的事情。我已经添加了 Hoverable 类以有效地设置所有这些操作元素的样式。
现在，我需要更改 .Hoverable:hover background-color，但以下内容似乎不起作用:$(".Hoverable :hover").css("background-color, new_value);"
是否有一种简单有效的方法来动态更改悬停类的 CSS 中的属性值？
这是一个简化的片段来说明我的问题。
$("#textareaID").bind("input propertychange", function() {
//console.log($("#textareaID").val());
$("#body").attr("user_color", $("#textareaID").val());
// I Need to change the .Hoverable:hover background-color, but the following doesn't work
$(".Hoverable:hover").css("background-color", $("#textareaID").val());
});
// Line below makes the above triggers on load
$("#textareaID").trigger("input");body {
font: 18px arial, sans-serif;
}
#textareaID,
.Tool,
.Link,
.Button {
display: block;
width: 100px;
height: 24px;
border: 2px solid rgba(0, 0, 0, .1);
transition: all 0.4s;
text-align: center;
background-color: transparent;
box-sizing: border-box;
}
#textareaID {
resize: none;
overflow: hidden;
}
.Tool {
border-left-color: red;
border-right-color: red;
}
.Link {
border-bottom-color: blue;
}
.Button {
border-bottom-color: green;
}
.Hoverable {
cursor: pointer;
}
.Hoverable:hover {
border-color: rgba(0, 0, 0, .7);
background-color: rgba(0, 0, 0, .1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body" user_color="#ddddff">
<!-- In my case, my color selection is not a textarea, I used it to make things simplier -->
Color selected: <textarea id="textareaID">#ddddff</textarea>
<br> User possible actions:
<div class="Tool Hoverable">DIV</div>
<br>
<a class="Link Hoverable">LINK</a>
<br>
<button class="Button Hoverable">BUTTON</button>
</body>最佳答案
您可以使用 CSS 变量来简化:
$("#textareaID").on("input change", function() {
$("#body").attr("user_color", $(this).val());
$(":root").attr("style","--color-hover:"+$(this).val())
});
// Line below makes the above triggers on load
$("#textareaID").trigger("input");:root {
--color-hover:#ffffff;
}
body {
font: 18px arial, sans-serif;
}
#textareaID,
.Tool,
.Link,
.Button {
display: block;
width: 100px;
height: 24px;
border: 2px solid rgba(0, 0, 0, .1);
transition: all 0.4s;
text-align: center;
background-color: transparent;
box-sizing: border-box;
}
#textareaID {
resize: none;
overflow: hidden;
}
.Tool {
border-left-color: red;
border-right-color: red;
}
.Link {
border-bottom-color: blue;
}
.Button {
border-bottom-color: green;
}
.Hoverable {
cursor: pointer;
}
.Hoverable:hover {
border-color: rgba(0, 0, 0, .7);
background-color:var(--color-hover);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="body" user_color="#ddddff">
<!-- In my case, my color selection is not a textarea, I used it to make things simplier -->
Color selected: <textarea id="textareaID">#ddddff</textarea>
<br> User possible actions:
<div class="Tool Hoverable">DIV</div>
<br>
<a class="Link Hoverable">LINK</a>
<br>
<button class="Button Hoverable">BUTTON</button>
</body>关于javascript - 在 jQuery 中悬停时处理 CSS 更改(用户选择的颜色)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49026103/