Question

我希望了解如何在嵌套DIV的父元素悬停时成功定位并切换嵌套DIV中子元素的类。标记如下：

<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>

所以寻找一个解决方案，当 a.entire-meta-link 元素悬停时 - .blogindexFeedLinkBtnWrapper 有一个新类 Chickens 添加到它 - 然后在没有悬停时删除 - 我需要在本地工作到此代码块的每个实例，因为它在页面上多次出现。

Answer 1

看到它实际上看起来并不是a.entire-meta-link的孩子，你需要上升一级，然后寻找这样的孩子：

$('.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');
    }
)

Answer 2

我添加了一些CSS来查看要悬停的区域，检查代码中是否存在元素，因为我必须将其设为块并添加宽度/高度，因为.entire-meta-link在这里是空的！

＆＃13;

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

＆＃13;

a {text-decoration : none; color: black;}

.entire-meta-link { display: block; height: 10px; width: 100px; background-color: red;}

.Chickens {
    background-color : red;
}

＆＃13;

<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>

＆＃13;

这是你在找什么？

父级悬停时元素的toggleClass

2 个答案: