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

Posted 2023-03-07

【中文标题】如何使用 onclick 按钮更改悬停颜色

【英文标题】：How to change hover color using onclick button

【发布时间】：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 变量文档与此答案结合起来：***.com/a/41371037/7310570。

【参考方案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 做