使用悬停更改 DIV 颜色并单击 JQuery

Posted 2023-05-08

【中文标题】使用悬停更改 DIV 颜色并单击 JQuery

【英文标题】：Changing DIV colors using hover and click in JQuery

【发布时间】：2012-04-25 17:39:32

【问题描述】：

有人可以帮忙吗？我有这两个：

我希望文本在悬停时变为浅绿色，在未悬停时变为白色，在单击时变为红色。

$(".music").hover(
    function() 
        $(this).css('color','lightgreen');
    , 
    function() 
        $(this).css('color', 'white');
    
);

$(".music").click(function ()  
    $('#result').load('album_list_index.php');
    $(this).css( 'color': 'red', 'font-size': '100%' );
);

提前谢谢你

交流

注意：好的，对不起，我没有说清楚。

不鼠标悬停时我需要 div 为白色 鼠标悬停时我需要它是格力 我需要它在点击时是红色的，并且在点击另一个按钮之前保持红色。

感谢大家的投入，特别是添加类和删除类案例，这是一个很好的课程，一旦我掌握了更多技术，我将使用它。

【问题讨论】：

为什么你没有为你工作？它工作正常：jsfiddle.net/cCAJh

打败了我，问题是当我单击该项目时它变成红色但随后又恢复为白色并且我将鼠标悬停在它上面

那是因为hover的mouseout部分被称为将元素颜色设置回白色。

嗯是的，但是我如何设法让它在点击后保持红色并且不再激活鼠标？

使用类 - 请参阅下面的答案。

【参考方案1】：

问题是当我点击它变成红色的项目，然后它恢复为白色，我将鼠标悬停在它上面

如果您希望 click 保持状态，最好使用类。试试这个：

a  color: white; 
.active  color: red; 
.hover  color: lightgreen; 

$(".music").hover(
    function() 
        $(this).addClass("hover");
    , 
    function() 
        $(this).removeClass("hover");
    
);

$(".music").click(function ()  
    $('#result').load('album_list_index.php');
    $(".music").removeClass("active");
    $(this).removeClass("hover").addClass("active");
);

Example fiddle

【讨论】：

，一旦点击红色就不会粘住。

好的，我修改了我的 css 以确保 div #menuitem li 包含 :hover 和 :active 并且它很有效。感谢您的帮助。

在选择红色时它仍然会变为绿色，但现在可以。

要解决这个问题，给active类更高的优先级，试试a.active color: red;

【参考方案2】：

您可以使用 CSS 伪元素：:hover 和 :active。

或者，当使用 jQuery 时，使用 .hover() 和 .click() 方法。

【讨论】：

但请记住，旧版浏览器不完全支持 CSS 伪选择器 - 特别是如果未在 a 元素上使用。

它们不起作用。我把课程变成了 id，但仍然没有。

看起来像这样 a:link color:#FF0000; /* 未访问的链接 / a:visited color:#00FF00; / 已访问的链接 / a:hover color:#FF00FF; / 鼠标悬停在链接 / a:active color:#0000FF; / 选择的链接 */ 我有最新的 firefox，其他部分工作，例如链接，但菜单按钮不工作。

【参考方案3】：

只需将您的代码包装在 $(document).ready(function() // code here ); 中即可。

【参考方案4】：

推荐使用 CSS ......但你仍然可以使用 jquery

  $(document).ready(function()
        $(".music").mouseover(function() 
           if(!$(this).hasClass('dontchange'))
              $(this).css('color','lightgreen');
           
        );
        $(".music").mouseout(function() 
               if(!$(this).hasClass('dontchange'))
                $(this).css('color', 'white');
             
        

        $(".music").click(function ()  
         $(this).addClass('dontchange');
        $('#result').load('album_list_index.php');
        $(this).css( 'color': 'red', 'font-size': '100%' );
        );
        );

【讨论】：

这个 ubercooluk 的问题是我需要它在点击时保持红色而不改变。我确定它全部是铸造的，但我无法理解它。