处理jQuery悬停时的CSS更改（用户选择的颜色）
[英]Handle CSS change (color picked by user) on hover in jQuery
问题描述
I've got a PHP/HTML application in which the user selects the background color they want. 
我有一个PHP / HTML应用程序，用户可以在其中选择所需的背景色。 It is saved in an ini file and it's used when the page is reloaded. 它保存在一个ini文件中，并在重新加载页面时使用。
Now, users would like to do the same thing with the "hovered" color of the many different user actions elements. 现在，用户希望使用许多不同的用户操作元素的“悬停”颜色来执行相同的操作。 I have already added the Hoverable class to effectively able to style all those actions elements. 我已经添加了Hoverable类以有效地设置所有这些action元素的样式。
Now, I need to change the .Hoverable:hover background-color , but the following doesn't seem to work: $(".Hoverable:hover").css("background-color, new_value);" 现在，我需要更改.Hoverable:hover background-color ，但是以下内容似乎无效： $(".Hoverable:hover").css("background-color, new_value);"
Is there an easy and effective way to dynamically change a property value in the CSS of a hovered class? 是否有一种简单有效的方法来动态更改悬停类的CSS中的属性值？
Here is a simplified snippet to illustrate my problem. 这是一个简化的片段来说明我的问题。
$("#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>
2 个解决方案
解决方案1
2 已采纳 2018-02-28 09:40:54
You can simplify by using CSS variable: 您可以使用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>
解决方案2
0 2018-02-28 09:45:33
Here we go with an easy solution combinning focusin , focusout and keyup events: 这里我们结合了一个简单的解决方案，结合了focusin ， focusout和keyup事件：
var val = "" $("#textareaID").on("focusin focusout keyup", function() { val = $(this).val() }); $(".Hoverable").mouseover(function(){ $(this).css("background-color", val); }); $(".Hoverable").mouseout(function(){ $(this).css("background-color", "white"); });
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 (Write any color and test it): <textarea id="textareaID">red</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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.