CODEWITHSUNDEEP
jquerycss
Hari krishnan
Hari krishnan

Reputation: 2108

Changing style for children elements of dynamically created jQuery

My Code:

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

The .posts** is a dynamically created element and is a children of #posts_cont. Similarly .posts_setting is dynamically created** and child of .posts. Since there are more .posts elements, to identify corresponding element hovered i use $(this).

The mouseover and mouseout of .posts works and changes the opacity correctly. But the mouseover of .posts_setting does not change the opacity to 1.

Is there a solution to this problem? I need to change the opacity of .posts_setting to 0.15 when hovering .posts and to 1 when hovering .posts_setting.

Upvotes: 0

Views: 71

Answers (3)

Hari krishnan
Hari krishnan

Reputation: 2108

I changed from jQuery to CSS as said by @stackErr

CSS:

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

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

Upvotes: 0

Ricky Goldman
Ricky Goldman

Reputation: 349

If .posts_setting is a child of .posts, it can't have a higher opacity than its parent. In this example, .posts_setting will be set to a higher opacity than .posts, so it will only appear to be whatever .posts is currently set at (0.15).

The solution would require a change in the markup. .posts_setting would have to be placed outside of the .posts container.

If you can show a fiddle or more complete html/css (doesn't matter if it's static, just an example of what you're trying to do), I can maybe give a more specific solution.

Upvotes: 1

stackErr
stackErr

Reputation: 4170

Just add this to your css:

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

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

Upvotes: 1

Related Questions