CSS伪类与jQuery

plupiseo 于 2023-01-30 发布在 jQuery

关注(0)|答案(4)|浏览(160)

我刚刚学了一点jQuery，并尝试使用它来实现一个简单的颜色变化效果。假设我有两个<div〉，#foo和#bar。#foo有很多URL，并定义了以下CSS：

#foo a {color: blue; border-bottom: 1px dashed blue}
#foo a:hover {color: black; border-bottom: 1px solid black}

现在我想在用户点击#bar时改变#foo中链接（a：link）的颜色，但保持a：hover的颜色不变，所以我这样写我的函数：

//...
$("#bar").click(function () {
  $("#foo a").css("color", "red");
});
//...

问题是，虽然这个函数确实把所有链接都变成了红色，但a：hover的颜色丢失了，也就是说，当用户把光标移到链接上时，它们仍然是红色，而不是像我预期的那样变成黑色。
因为我看到jQuery所做的是将一个内联样式放在#foo中的<a〉s中，使它们成为<a style="color:red;" href="..."〉，我猜这将覆盖：hover伪类。由于伪类的内联样式属性还没有被任何人实现过，我怀疑我是否能得到我想要的效果...
还有，是否有任何解决方案不需要我编写类似

$("#foo a").hover(
    function(){ $(this).css("color", "black");},
    function(){ $(this).css("color", "blue");}
)

？
谢谢。

jquery

来源：https://stackoverflow.com/questions/486159/css-pseudo-classes-with-jquery

4条答案

按热度按时间

jrcvhitl1#

摘自Setting CSS Pseudo Class Rules From Javascript
实际上，你可以在hover或者使用：after或者任何你想要的javascript伪类来改变一个类的值：

$(document).ready(function()
{
    var left = (($('.selected').width() - 7) / 2) + 'px';
    document.styleSheets[1].insertRule('.selected:after { left: ' + left + '; }', 0);
    document.styleSheets[0].cssRules[0].style.left = left;
});

希望这对任何人都有帮助。

赞(0）回复(0）举报 2023-01-30

u0njafvf2#

！important似乎让css属性比内联样式更强大，至少在Firefox中是这样的。尝试将你的样式更改为如下所示：

#foo a:hover { color: black !important; }

赞(0）回复(0）举报 2023-01-30

unhi4e5o3#

也许您可以删除您在将鼠标悬停在链接上时添加的类，如下所示：

$('#bar').click(function() {
  $('#foo a').css('color', 'red');
});
$('#foo').hover() {
  $'#foo a').removeCss('color', 'red');
});

[EDIT]：您可能需要添加一个IF语句，以便首先查看类是否存在。

赞(0）回复(0）举报 2023-01-30

kqhtkvqz4#

另一种使用Javascript的讨厌方法是清空容器元素，然后用内容重新填充它，并重新设置单击事件。这会破坏所有状态和事件，因此必须重新设置它们，但对于不包含大量数据的简单对象，它可以工作！
我用这个导航菜单的使用：hover类。

$('#page_nav ul').click(clearNavMenu_Hover);

function clearNavMenu_Hover() {
    var tmpStore=$('#page_nav').html();
    $('#page_nav').empty();
    $('#page_nav').html(tmpStore);
    $('#page_nav ul').click(clearNavMenu_Hover);
}

赞(0）回复(0）举报 2023-01-30

我来回答

CSS伪类与jQuery

4条答案

相关问题

热门标签

最新问答