CODEWITHSUNDEEP
jquery
dubbs
dubbs

Reputation: 1199

toggleClass of element on hover of parent

I am looking to understand how to succesfully target and toggle the class of a child element within a nested DIV when its parent a is hovered over. Markup is below:

<div class="content-inner" style="user-select: auto;">
    <a class="entire-meta-link" href="Blah" style="user-select: auto;"></a>
    <span class="meta-category" style="user-select: auto;">
        <a class="uncategorized" href="Blah" style="user-select: auto;">Uncategorized</a>
    </span>
    <div class="article-content-wrap" style="user-select: auto;">
        <div class="post-header" style="user-select: auto;">
            <h3 class="title" style="user-select: auto;">
                <a href="Blah" style="user-select: auto;">Hello world!</a>
            </h3>
        </div><!--/post-header-->
        <div class="excerpt" style="user-select: auto;">
            Welcome to WordPress. This is your first post. Edit or delete it, then start writing
        </div>                          
    </div>
    <div class="blogindexFeedLinkBtnWrapper" style="user-select: auto;">
        <a href="" style="user-select: auto;">Read more</a>
    </div><!--article-content-wrap-->
</div>

So looking for a solution that when the a.entire-meta-link element is hovered - the .blogindexFeedLinkBtnWrapper a has a mew class Chickens added to it - and then removed when not hovered over - I need this to work locally to each instance of this code block as it appears many times on the page.

Upvotes: 0

Views: 326

Answers (2)

Micka&#235;l Leger
Micka&#235;l Leger

Reputation: 3440

I add some CSS to see the area to hover, check if in your code the element exist because I have to make it a block and add a width / height since .entire-meta-link is an empty a here !

$(document).ready(function() {
  $(".entire-meta-link")
    .mouseenter(function() {
      $(this).parent().find('.blogindexFeedLinkBtnWrapper a').addClass('Chickens');
    })
    .mouseleave(function() {
      $(this).parent().find('.blogindexFeedLinkBtnWrapper a').removeClass('Chickens');
    });
});
a {text-decoration : none; color: black;}

.entire-meta-link { display: block; height: 10px; width: 100px; background-color: red;}

.Chickens {
    background-color : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-inner" style="user-select: auto;">
    <a class="entire-meta-link" href="Blah" style="user-select: auto;"></a>
    <span class="meta-category" style="user-select: auto;">
        <a class="uncategorized" href="Blah" style="user-select: auto;">Uncategorized</a>
    </span>
    <div class="article-content-wrap" style="user-select: auto;">
        <div class="post-header" style="user-select: auto;">
            <h3 class="title" style="user-select: auto;">
                <a href="Blah" style="user-select: auto;">Hello world!</a>
            </h3>
        </div><!--/post-header-->
        <div class="excerpt" style="user-select: auto;">
            Welcome to WordPress. This is your first post. Edit or delete it, then start writing
        </div>                          
    </div>
    <div class="blogindexFeedLinkBtnWrapper" style="user-select: auto;">
        <a href="" style="user-select: auto;">Read more</a>
    </div><!--article-content-wrap-->
</div>

Is it what you are looking for?

Upvotes: 0

CumminUp07
CumminUp07

Reputation: 1978

Seeing as how it doesn't appear to actually be a child of a.entire-meta-link you need to go up one level and then look for children like this:

$('.entire-meta-link').hover(
    // on mouse in
    function(){
        $(this).parent().find('.blogindexFeedLinkBtnWrapper a').addClass('Chickens');
    },
    // on mouse out
    function(){
        $(this).parent().find('.blogindexFeedLinkBtnWrapper a').removeClass('Chickens');
    }
)

Upvotes: 2

Related Questions