3

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

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

我找到了这篇文章，但它的答案对我不起作用： 仅为非悬停元素设置样式

这是我到目前为止所尝试的：

/*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 解决方案的方法相同。有人可以帮帮我吗？

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

4

3 回答 3

2

HTML：

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

CSS：

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

试试这个...

于 2012-10-20T19:55:37.360 回答
0

由于特异性#navigation ul li覆盖 #navigation ul:hover，这就是您的规则集不起作用的原因。
在您的列表中添加“a”：悬停规则，您应该没问题 

#navigation ul:hover a
{
   font-size: 13px;    
}

http://jsfiddle.net/DRJCg/

于 2012-10-20T20:04:50.460 回答
0

安装#navigation ul，我想应该是#navigation ul li

一种更直接的方法是将一个类添加到您的 li 并指向该类。

我你会使用一个函数 li 所以：

function reduceOtherLi(li_to_keep_big){
 var eList = $('#navigation ul li')`//put all the li in an array
    // for each li in the array
    for (i=0; i<eList.length; i++){
        var e = eList[i]; //get current li

        //if it not the clicked one, make the size smalle
        if (e != li_to_keep_big) $(e).css({'font-size':'13px'}); 
        else $(e).css({'font-size':'14px'});
    }
}

然后您可以使用鼠标悬停处理程序来触发该功能

$("#navigation ul li").mouseover(function() { reduceOtherLi(this);});

要重置它们，只需添加以下行：

$("#navigation ul li").mouseout(function() { $('#navigation ul li').css({'font-size':'14px'});});

基本上你可以把它放在一个标签中，它会像你想要的那样工作。

请注意 .css()，您可以轻松地使用 .addClass() 和 .removeClass() 并在其中指定字体大小（和其他 css 的 bunh）。

至于事件处理程序，“this”将代表悬停元素。并作为 li_to_keep_big 传递。

希望这可以帮助。

于 2012-10-20T20:06:00.617 回答