獲取所有沒有徘徊的元素，並與他們做一些事

我的問題可能很簡單，但不知何故，我不能得到它修復。在一組對象中有一個對象懸停的情況下，我希望懸停對象保持不變，但所有其他對象都應該改變。獲取所有沒有徘徊的元素，並與他們做一些事

更具體地說：我有一個無序的菜單項列表。每當我將其中一個懸停時，所有其他項目都應該變小。當我「解除」這個項目時，他們應該改回來。

我發現這個職位，但它的答案並沒有爲我工作： 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解決方案的方法相同。有人可以幫我嗎？

我希望我的解釋是可以理解的。如果還有問題，請詢問。

來源

2012-10-20 coerv

你可以在這裏發佈你的'html'或者製作一個[fiddle]（http://jsfiddle.net）。 –

HTML：

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

CSS：

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

嘗試......

來源

2012-10-20 19:55:37 kspacja

同意，** + 1 **，我可以提供[JS小提琴]（http://jsfiddle.net/davidThomas/UFwAJ/）我是=） –

這是完美的工作。非常感謝。 :-) – coerv

由於特異性#navigation ul li覆蓋#navigation ul:hover這就是爲什麼你的規則集不起作用。
加「一」在你的名單：懸停規則，你應該罰款

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

http://jsfiddle.net/DRJCg/

來源

2012-10-20 20:04:50

insted的的#navigation ul，我覺得前人的精力是#navigation ul 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（），並在那裏指定font-size（和其他css的bunh）。

至於事件處理程序，'this'將重複懸停的元素。並作爲li_to_keep_big傳遞。

希望這有助於。

來源

2012-10-20 20:06:00

我會明確地爲你的'可靠的'列表項目創建一個css類。將簡單地使用$（'。className'）指針 –

「將所有的李放在數組中」 - 我寧願使用每個函數。 – kspacja

獲取所有沒有徘徊的元素，並與他們做一些事

回答

相關問題