Question

我的代码：

$("#posts_cont").on("mouseover",".posts",function (e){
    $(this).children(".posts_setting").css("opacity","0.15");
});
$("#posts_cont").on("mouseover",".posts_setting",function (e){
    $(this).css("opacity","1");
});
$("#posts_cont").on("mouseout",".posts",function (){
    $(this).children(".posts_setting").css("opacity","0");
});

.posts **是动态创建的元素，是#posts_cont的子元素。类似地.posts_setting是动态创建的**和.posts的子项。由于有更多的.posts元素，为了识别相应的元素，我使用$（this）。

.posts的鼠标悬停和鼠标移动可以正常工作并更改不透明度。但是.posts_setting的鼠标悬停不会将不透明度更改为1。

这个问题有解决方法吗？我需要在悬停.posts时将.posts_setting的不透明度更改为0.15，并在悬停.posts_setting时将其更改为1.

Answer 1

只需将此添加到您的css：

#posts_cont .posts_setting:hover {
    opacity: 0.15;
}

#posts_cont .posts:hover {
    opacity: 1;
}

Answer 2

如果.posts_setting是.posts的子级，则它的不透明度不能高于其父级。在这个例子中，.posts_setting将被设置为比.posts更高的不透明度，所以它只会出现在当前设置为（0.15）的任何.posts。

解决方案需要更改标记。 .posts_setting必须放在.posts容器之外。

如果你可以展示一个小提琴或更完整的html / css（如果它不是静止的，只是你要尝试做的一个例子），我可以给一个更具体的解决方案。

Answer 3

我按照@stackErr

的说法从jQuery更改为CSS

<强> CSS：

#posts_cont .posts:hover .posts_setting:hover {
    opacity: 1;
}

#posts_cont .posts:hover .posts_setting{
    opacity: 0.15;
}

更改动态创建的jQuery的子元素的样式

3 个答案: