JavaScript的鼠標懸停在動態數量的元素

我的目標是懸停包含在標籤內的p元素在懸停時變大。我已經通過css3轉換實現了這一點，但這不是問題。JavaScript的鼠標懸停在動態數量的元素

循環在每次迭代中在下面的表單中創建可變數量的元素。

anchorElement = "<a id='anchor" + countWide + "' class=\"boxOPT oneplustwo\" alt=\'"+ image_website +"' style=\"cursor:pointer;width:"+ itemWidth + "px"+";height:"+anchorHeight+";position:absolute;left:"+ locationLeft + "px"+";top:0.3%;\" ><p id=\"test\" class=\"popupDynamic\"> " + popupImageTitles[i] + "</p>"; 
     anchorElement += '</a>';

我很希望能夠在用戶滾動相關錨時添加鼠標進/出效果。每個p標籤都包含需要傳達的唯一信息，只有相關人員才能做出反應。

我不想要它在下面的方式，每次創建一個新的元素每個方法上面創建兩個。有沒有辦法獲得下面的內容，這將適用於動態數量的元素？

$("#anchor" + etc).mouseover(function() { 
document.getElementById("test").style.height="1.1em"; 
}); 
$("#anchor" + etc).mouseout(function() { 
document.getElementById("test").style.height="1.1em"; 
});

我的建議版本。控制檯日誌工作。

.popupHighlight { 
color: red; 
}

$('.boxOPToneplustwo').mouseover(function (e) { 
console.log("in"); 
$(e.target).next('p').addClass("popupHighlight"); 
}); 

$('.boxOPToneplustwo').mouseout(function (e) { 
$(e.target).next('p').removeClass("popupHighlight"); 
});

來源

2013-12-23 user2696787

嘿傢伙，這個建議很有效，直到現在，新的課程才被添加。它似乎不會適用於我的CSS變化。我將在上面編輯我的答案，以顯示我的代碼 – user2696787

關於你的第二個問題：html在類名'boxOPT oneplustwo'中有一個空格，但是你的選擇器沒有：'$（'。boxOPToneplustwo'）' – yochannah

供將來參考，最好不要更新多個問題，很難跟蹤發生的事情。也許試試問一個新的問題。 :) – yochannah

有關選擇全部要素是什麼？

$('a').mouseout(function() { 
//do stuff in here 
});

或更好，但有一類選擇：

$('.mySpecialRolloverClass').mouseover(function (e) { 
    $(e.target).next('p').addClass("highlight"); 
}); 

$('.mySpecialRolloverClass').mouseout(function (e) { 
    $(e.target).next('p').removeClass("highlight"); 
});

這將齊頭並進與

<a href="whatever" class="mySpecialRolloverClass">An anchor</a>

和

.highlight { 
    color:red; 
}

這裏有一個的jsfiddle演示：

http://jsfiddle.net/8J6kM/

來源

2013-12-23 20:10:17 yochannah

請記住，如果任何事情稍後添加到頁面，他們將不會得到任何這些事件。使用'on'方法可能是更安全的選擇。 – Mahdi

是的，絕對值得注意。 – yochannah

我更新了上面的代碼與另一個問題，謝謝 – user2696787

的@yochannah答案是正確的，但是如果你要動態地添加更多的鏈接，那麼你需要使用on方法，而不是mouseover和mouseout，否則將無法正常工作。有關更多詳細信息，請參見demo和jQuery documentation。

// I assumed that links are placed inside of a container element: #links 
$('#links').on('mouseover', '.mySpecialRolloverClass', function (e) { 
    $(e.target).next('p').addClass("highlight"); 
});

來源

2013-12-23 20:43:21 Mahdi

JavaScript的鼠標懸停在動態數量的元素

回答

相關問題