如何使用 onclick 按鈕更改 hover 顏色

Question

我想在主題更改之類的頁面中切換多個 colors。 我成功更改了文本顏色、文本背景顏色、形狀顏色、按鈕顏色等。但我也想更改 hover 顏色。

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

請幫我。 我不知道如何解決它。

Answer 1

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

對於所有 id(red,green,blue)，您可以在 css 中執行此操作

Answer 2

使用變量和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>

Answer 3

這是使用通過 Javascript 更改的 CSS 變量的解決方案。 我建議您閱讀文檔以更好地了解此處發生的情況。

 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>