如何使用 onclick 按钮更改悬停颜色答案

【问题标题】：How to change hover color using onclick button如何使用 onclick 按钮更改悬停颜色
【发布时间】：2021-06-04 11:47:02
【问题描述】：

我想在页面中切换多种颜色，例如主题更改。我成功更改了文本颜色、文本背景颜色、形状颜色、按钮颜色等。但我也想更改悬停颜色。

这是html代码：-

 <ul class="color-changer">
        <li><a href="#" id="red">RED</a></li>
        <li><a href="#" id="green">GREEN</a></li>
        <li><a href="#" id="blue">BLUE</a></li>
    </ul>

此代码有效：-

<script>
    $('#red').click(function () {
        $('.sidebar button').css({
            'background-color': 'red'
        });
        $('.text-color').css({
            'background-color': 'red'
        });
        $('.shape-left').css({
            'background-color': 'red'
        });
    });
</script>

但这不起作用：-

<script>
    $('#red').click(function () {
        $('.sidebar button:hover').css({
            'background-color': 'red'
        });
       
    });
</script>

请帮助我。不知道怎么解决。

【问题讨论】：

看看CSS variables，这可能是一个更好的方法
我是新手。请帮助我理解它。
您可能希望为不同的主题创建不同的 css 类并更改类名，而不是更改 css 属性。或者甚至更好，如前所述，研究使用 css 变量。
您可以将上面给出的 CSS 变量文档与此答案结合起来：stackoverflow.com/a/41371037/7310570。

标签： javascript html jquery css

【解决方案1】：

这是一个使用通过 Javascript 更改的 CSS 变量的解决方案。我建议您阅读the documentation 以更好地了解这里发生的情况。

let themes = {
  red: {
    '--sidebar-bg': '#FFAEBE',
    '--sidebar-a-color': '#88001B',
    '--sidebar-a-hover-color': '#FF0033',
  },
  green: {
    '--sidebar-bg': '#BBFFAE',
    '--sidebar-a-color': '#148800',
    '--sidebar-a-hover-color': '#3DFF00',
  },
  blue: {
    '--sidebar-bg': '#AEEFFF',
    '--sidebar-a-color': '#006E88',
    '--sidebar-a-hover-color': '#00CEFF',
  },
};

$('.color-changer').on('click', 'a', (e) => {
  e.preventDefault();
  let theme = $(e.target).data('theme');
  setSidebarTheme(theme);
});

function setSidebarTheme(theme) {
  let sidebar = $('#sidebar')[0]; // Get the raw Element, not jQuery
  for(let [prop, value] of Object.entries(themes[theme])) {
    // set value to the CSS variable
    sidebar.style.setProperty(prop, value);
  }
}

// initial theme
setSidebarTheme('blue');

#sidebar { padding: 20px; }

#sidebar {
  background: var(--sidebar-bg);
}

#sidebar a {
  color: var(--sidebar-a-color);
}

#sidebar a:hover {
  color: var(--sidebar-a-hover-color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="sidebar">
  <ul class="color-changer">
    <li><a href="#" data-theme="red">RED</a></li>
    <li><a href="#" data-theme="green">GREEN</a></li>
    <li><a href="#" data-theme="blue">BLUE</a></li>
  </ul>
</div>

【讨论】：

【解决方案2】：



    #red:hover
    {
    background-color:"color"
    }

对于所有 id(red,green,blue)，您可以在 css 中执行此操作

【讨论】：

这只会改变特定按钮的悬停颜色。不是例如侧边栏按钮 OP 正在谈论。

【解决方案3】：

使用变量和hover() 你可以完成这项工作：（你不能用 :hover 修改 css 样式）

var red = {'background-color': 'red'};
var redhover = {'background-color': 'yellow'};
$('#red').click(function() {
  $('.sidebar button').css(red);
  $('.text-color').css(red);
  $('.shape-left').css(red);
  redhover = {'background-color': 'pink'};
});


$(".sidebar button").hover(function() {
    $(this).css(redhover);
  },function() {
    $(this).css("background-color", "");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="color-changer">
  <li><a href="#" id="red">RED</a></li>
  <li><a href="#" id="green">GREEN</a></li>
  <li><a href="#" id="blue">BLUE</a></li>
</ul>

【讨论】：

这仅适用于您希望更改此特定按钮的悬停颜色的情况。不是为页面上的任何其他元素，你要改变的主题。
@Kielstra 否定会随着您设置的选择器而变化
啊，是的，你说得对。我猜是因为#red 选择器，所以我是这样读的。
反正只有 2 个解决方案，或者你用 js 做，或者像其他解决方案一样用 CSS 做