Question

在.parent()和.find()为我工作的过程中寻找帮助...我在页面上有一系列DIV，如下面的代码块。我想要的是，当用户滚过.linkerBtn href时，我将新课程添加到顶级父threeCol Div newsFeedItemHovered - 请帮忙！< / p>

<div class="threeCol">
  <div class="threeColInner">
    <div class="feedItemWrapper newsFeedItem noBottom">
      <h3>
        <a title="News article 3" href="news-and-events/latest-news/news-article-3.html">News article 3</a>
      </h3>
      <p class="ItemStamp">03/09/2015</p>
      <p>News post summary text... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod euismod euismod. Quisque cursus quam sem, ac fermentum quam molestie in.</p>
      <p class="noBottom">
        <a class="linkerBtn inline small" title="Read more about News article 3" href="news-and-events/latest-news/news-article-3.html">Read more</a>
      </p>
    </div>
  </div>
</div>

Answer 1

＆＃13;

$("a.linkerBtn").hover(function() {
  // Add class while hovered over anchor
  $(this).closest(".threeCol").addClass("newsFeedItemHovered");
}, function() {
  // Remove class when we move away
  $(this).closest(".threeCol").removeClass("newsFeedItemHovered");
});

＆＃13;

.newsFeedItemHovered {
  background-color: lightgrey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="threeCol">
  <div class="threeColInner">
    <div class="feedItemWrapper newsFeedItem noBottom">
      <h3><a title="News article 3" href="news-and-events/latest-news/news-article-3.html">News article 3</a></h3>
      <p class="ItemStamp">03/09/2015</p>
      <p>News post summary text... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod euismod euismod. Quisque cursus quam sem, ac fermentum quam molestie in.</p>
      <p class="noBottom"><a class="linkerBtn inline small" title="Read more about News article 3" href="news-and-events/latest-news/news-article-3.html">Read more</a>
      </p>
    </div>
  </div>
</div>
<div class="threeCol">
  <div class="threeColInner">
    <div class="feedItemWrapper newsFeedItem noBottom">
      <h3><a title="News article 3" href="news-and-events/latest-news/news-article-3.html">News article 3</a></h3>
      <p class="ItemStamp">03/09/2015</p>
      <p>News post summary text... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod euismod euismod. Quisque cursus quam sem, ac fermentum quam molestie in.</p>
      <p class="noBottom"><a class="linkerBtn inline small" title="Read more about News article 3" href="news-and-events/latest-news/news-article-3.html">Read more</a>
      </p>
    </div>
  </div>
</div>

＆＃13;

找到父div并添加类

1 个答案: