jquery - 获取所有未悬停的元素并对它们进行处理

Question

我的问题可能很简单，但不知何故我无法解决。在一组对象中有一个对象悬停在上面，我希望悬停的对象保持不变，但所有其他对象都应该改变。

更具体地说:我有一个无序列表的菜单项。每当我将鼠标悬停在其中一个上时，所有其他元素都应该变小。当我“取消悬停”该元素时，他们应该再次变回。

我找到了这篇文章，但它的答案对我不起作用: Set style for not not hovered elements only

这是我到目前为止尝试过的:

/*This is the default size*/
#navigation ul li a
{
    font-size: 14px;    
}
/*When the list is hovered, change font-size (does’nt work)*/
#navigation ul:hover
{
    font-size: 13px;    
}
/*When the a menu-item is hovered change it’s font-size back to default*/
#navigation ul li a:hover
{
    font-size: 14px;    
}

这是我在我提到的帖子中找到的答案之一。如果可以简单地使用纯 CSS 来完成，那就太好了。但它不起作用。我做错了什么吗？

虽然我不是专家，但我也尝试过使用 jQuery。

for(var i=1; i <= anzahlNavipunkte; i++)
{
    var naviId = "navi" + i; // id name for every menu-item
    var currentMenuItem = "#navigation li:nth-child(" + i + ") a"; 

    $(currentMenuItem).attr('id', naviId); // gives the current menu-item a specific id

    $('#navigation li a').hover(function()
    {   
        var hoveredId = $(this).attr("id"); // get the id of of the hovered element

        $('#' + hoveredId).hover(function()
        {   
            console.log(hoveredId);
            $('#' + hoveredId).css('font-size', '14px'); // hovered element gets default font-size
            $('#navigation ul').css('font-size', '13px'); // other elements change to 13px
        }, function()
        {
            $('#navigation ul').css('font-size', '14px'); // other elements change back
        })
    });
};  

这也行不通。可能是因为它与普通 CSS 解决方案的方法相同。谁能帮帮我？

我希望我的解释是可以理解的。如果还有问题，请提出。

Answer 1

HTML:

<div id="container" >
   <div id="children">
   </div>
</div>

CSS:

#container:HOVER #children {
    /* your style */
}

试试这个...