Question

我有一个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>

Answer 1

您可以使用CSS变量进行简化：

＆＃13;

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

＆＃13;

: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);
}

＆＃13;

<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>

＆＃13;

Answer 2

我们采用简单的解决方案，结合focusin，focusout和keyup事件：

＆＃13;

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

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

在jQuery中悬停时处理CSS更改（用户选择的颜色）

2 个答案: