使用jquery将悬停标题添加到选项卡图片库

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<ul class="tab-nav">
  <li class="active">图片1</li>
  <li>图片2</li>
  <li>图片3</li>
</ul>

<div class="tab-content">
  <div class="tab-pane active">
    <img src="image1.jpg" alt="图片1">
    <h3>标题1</h3>
  </div>
  <div class="tab-pane">
    <img src="image2.jpg" alt="图片2">
    <h3>标题2</h3>
  </div>
  <div class="tab-pane">
    <img src="image3.jpg" alt="图片3">
    <h3>标题3</h3>
  </div>
</div>

$(document).ready(function() {
  $('.tab-pane').hover(
    function() {
      $(this).find('h3').addClass('hover');
    },
    function() {
      $(this).find('h3').removeClass('hover');
    }
  );
});

.hover {
  color: red;
  background-color: yellow;
}