Question

我的目标是悬停一个包含在标签内的p元素在悬停时变得更大。我通过css3转换实现了这一点，但这不是问题。

循环在每次迭代时在下面的表单中创建可变数量的元素。

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");
 });

Answer 1

选择所有元素怎么样？

$('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/

Answer 2

@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");
});

Javascript鼠标悬停在动态数量的元素上

2 个答案: