如何将此 jquery 功能从 onclick 更改为悬停？

Question

大家好，我正在处理一个粗略的元素。这是一个服务轮，当有人点击一项服务时，右侧的文本会更改为一个新的跨度，以显示代表该特定服务的短段落。我遇到的麻烦是将其提升到一个新的水平。我希望每项服务的文本（减税策略、遗产和遗产规划）等...在鼠标悬停时显示（与图像同时发生变化，就像鼠标悬停时图像发生变化）而不是在单击时显示。

我是新来的，所以我只是想学习 :) 有人愿意接受帮助菜鸟的挑战吗？

这里是 link 实时查看 - https://wendyd58.sg-host.com/#wheel

这是我正在使用的。

var parentEl = jQuery('#approach-diagram').attr('class');
jQuery('#approach-diagram span').on('mouseover', function() {
  var hoverEl = jQuery(this).attr('class');
  jQuery('#approach-diagram').attr('class', hoverEl + '-bg');
});

jQuery('#approach-diagram').on('mouseleave', function() {
  jQuery('#approach-diagram').attr('class', parentEl);
});

jQuery('#approach-diagram span').on('click', function() {
  var clickEl = jQuery(this).attr('class');
  jQuery('#approach-diagram').attr('class', clickEl + '-bg');
  jQuery('.approach-text').slideUp();
  jQuery('#' + clickEl + '-text').slideDown();
  parentEl = clickEl + '-bg';
});

#approach {}

#approach #approach-diagram {
  width: 588px;
  height: 501px;
  background: url(https://wendyd58.sg-host.com/wp-content/uploads/2021/07/hollistic-financial-plan-spirte.png) no-repeat;
  display: block;
  text-align: center;
  margin: 0 auto;
  position: relative;
  background-size: cover;
}

#approach #approach-diagram.retirement-bg {
  background-position: 0 -14px;
}

#approach #approach-diagram.investment-bg {
  background-position: 0px -500px;
}

#approach #approach-diagram.tax-bg {
  background-position: 0px -986px;
}

#approach #approach-diagram.legacy-bg {
  background-position: 0px -1472px;
}

#approach #approach-diagram.social-bg {
  background-position: 0px -2445px;
}

#approach #approach-diagram.insurance-bg {
  background-position: 0px -2931px;
}

#approach #approach-diagram.life-bg {
  background-position: 0px -1959px;
}

#approach #approach-diagram.college-bg {
  background-position: 0px -3418px;
}

#retirement-text H2 {
  font-size: 20px;
  color: #364270;
}

#investment-text H2 {
  font-size: 20px;
  color: #364270;
}

#tax-text H2 {
  font-size: 20px;
  color: #364270;
}

#legacy-text H2 {
  font-size: 20px;
  color: #364270;
}

#social-text H2 {
  font-size: 20px;
  color: #364270;
}

#insurance-text H2 {
  font-size: 20px;
  color: #364270;
}

#life-text H2 {
  font-size: 20px;
  color: #364270;
}

#college-text H2 {
  font-size: 20px;
  color: #364270;
}

.cavt {
  float: left;
  margin-right: 8px;
  margin-top: 0px;
}

.progress {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #65bc7b;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  box-shadow: inset 0 0px 0 rgba(0, 0, 0, .15) !important;
  -webkit-transition: width .6s ease;
  transition: width .6s ease;
}

#approach #approach-diagram span {
  width: 185px;
  height: 164px;
  cursor: pointer;
  background: transparent;
  position: absolute;
}

#approach #approach-diagram span.retirement {
  top: 74px;
  left: 288px;
  cursor: pointer;
  transform: rotate(7deg);
}

#approach #approach-diagram span.investment {
  bottom: 225px;
  left: 380px;
  cursor: pointer;
}

#approach #approach-diagram span.tax {
  bottom: 110px;
  left: 379px;
  cursor: pointer;
}

#approach #approach-diagram span.legacy {
  bottom: -33px;
  left: 293px;
  cursor: pointer;
  transform: rotate( 7deg);
}

#approach #approach-diagram span.social {
  bottom: 112px;
  left: 58px;
  cursor: pointer;
}

#approach #approach-diagram span.insurance {
  bottom: 232px;
  left: 8px;
  cursor: pointer;
  transform: rotate( 18deg);
}

#approach #approach-diagram span.life {
  bottom: 12px;
  left: 148px;
  cursor: pointer;
}

#approach #approach-diagram span.college {
  bottom: 342px;
  left: 148px;
  cursor: pointer;
}

.col-lg-06 {
  width: 44%;
}

.col-lg-006 {
  width: 56%;
  margin-top: 35px;
  padding: 0px 1%;
}

.containerr {
  width: 100%;
}

#approach .approach-text {
  width: 100%;
  position: relative;
  display: none;
}

#approach .approach-text img {
  position: absolute;
  top: 0;
  left: 0;
}

#approach .approach-text p {
  margin-top: 30px;
}

#approach .approach-text ul {
  padding-left: 70px;
}

#approach .approach-text ul li {
  list-style: disc;
  padding: 5px 0;
}

#approach .approach-text h4,
#approach .approach-text .button-row {
  text-align: center;
  color: #1c315f;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="approach">
  <div class="containerr">
    <div class="clear"></div>
    <div class="col-lg-06 col-md-6 col-sm-6">
      <div id="approach-diagram" class="retirement-bg">
        <span class="retirement"></span>
        <span class="investment"></span>
        <span class="tax"></span>
        <span class="legacy"></span>
        <span class="life"></span>
        <span class="social"></span>
        <span class="college"></span>
        <span class="insurance"></span>
      </div>
    </div>
    <div class="col-lg-006 col-md-6 col-sm-6">
      <div id="always">
        <div class="alwaysh inh">We Are Holistic Advisors.</span>
        </div>
        <div class="alwayst">
          <p>A holistic financial advisor looks at your finances with a wide-angle lens. A holistic plan is not just an investment strategy, a single tax return, or an insurance policy. It is a comprehensive blueprint for your entire financial picture that
            addresses specific risks and pitfalls you may never have considered. As expert holistic advisors, we put all the pieces together to solve for your unique goals and fears.</p>
        </div>
      </div>
      <div id="retirement-text" class="approach-text" style="display: block">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Tax Reduction Strategies</h2>
        </div>
        <p>Any comprehensive Retirement Plan will include a strategy for tax liabilities. We work collaboratively with our two qualified CPAs in completing your plan.</p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>
      <div id="investment-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Legacy and Estate Planning</h2>
        </div>
        <p>It is important to ensure your hard-earned assets go to your beneficiaries in the most efficient manner. We work collaboratively with a qualified Estate Planning Attorney in completing your plan.  </p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>
      <div id="tax-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Tax Reduction Strategies</h2>
        </div>
        <p>Any comprehensive Retirement Plan will include a strategy for tax liabilities. We work collaboratively with our two qualified CPAs in completing your plan.</p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>
      <div id="legacy-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Retirement Income Planning</h2>
        </div>
        <p>Our goal is to help ensure your expenses can be paid month to month with reliability and predictability for the rest of your life. </p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>

      <div id="social-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Social Security Maximization</h2>
        </div>
        <p>Many Americans rely primarily on Social Security in retirement and while you may not be able to maintain your current lifestyle on it alone, it can make up a large portion of your retirement income. We will help you choose the optimal time to
          claim your Social Security benefits that fits your situation.</p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>
      <div id="insurance-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>College Planning</h2>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>

      <div id="life-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Life Insurance, Disability and Long-Term Care</h2>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>

      <div id="college-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Investment Management</h2>
        </div>
        <p>Once your income is established, we will create an investment plan for the remaining assets that you do not need to draw from month to month.</p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>

    </div>
  </div>
  </div>
</section>

Answer 1

你可以这样做：

jQuery("#approach-diagram span").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

Answer 2

监听 mouseenter 事件：

var parentEl = jQuery('#approach-diagram').attr('class');
jQuery('#approach-diagram span').on('mouseover', function() {
  var hoverEl = jQuery(this).attr('class');
  jQuery('#approach-diagram').attr('class', hoverEl + '-bg');
});

jQuery('#approach-diagram').on('mouseleave', function() {
  jQuery('#approach-diagram').attr('class', parentEl);
});

jQuery('#approach-diagram span').on('mouseenter', function() {
  var clickEl = jQuery(this).attr('class');
  jQuery('#approach-diagram').attr('class', clickEl + '-bg');
  jQuery('.approach-text').slideUp();
  jQuery('#' + clickEl + '-text').slideDown();
  parentEl = clickEl + '-bg';
});

#approach {}

#approach #approach-diagram {
  width: 588px;
  height: 501px;
  background: url(https://wendyd58.sg-host.com/wp-content/uploads/2021/07/hollistic-financial-plan-spirte.png) no-repeat;
  display: block;
  text-align: center;
  margin: 0 auto;
  position: relative;
  background-size: cover;
}

#approach #approach-diagram.retirement-bg {
  background-position: 0 -14px;
}

#approach #approach-diagram.investment-bg {
  background-position: 0px -500px;
}

#approach #approach-diagram.tax-bg {
  background-position: 0px -986px;
}

#approach #approach-diagram.legacy-bg {
  background-position: 0px -1472px;
}

#approach #approach-diagram.social-bg {
  background-position: 0px -2445px;
}

#approach #approach-diagram.insurance-bg {
  background-position: 0px -2931px;
}

#approach #approach-diagram.life-bg {
  background-position: 0px -1959px;
}

#approach #approach-diagram.college-bg {
  background-position: 0px -3418px;
}

#retirement-text H2 {
  font-size: 20px;
  color: #364270;
}

#investment-text H2 {
  font-size: 20px;
  color: #364270;
}

#tax-text H2 {
  font-size: 20px;
  color: #364270;
}

#legacy-text H2 {
  font-size: 20px;
  color: #364270;
}

#social-text H2 {
  font-size: 20px;
  color: #364270;
}

#insurance-text H2 {
  font-size: 20px;
  color: #364270;
}

#life-text H2 {
  font-size: 20px;
  color: #364270;
}

#college-text H2 {
  font-size: 20px;
  color: #364270;
}

.cavt {
  float: left;
  margin-right: 8px;
  margin-top: 0px;
}

.progress {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #65bc7b;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  box-shadow: inset 0 0px 0 rgba(0, 0, 0, .15) !important;
  -webkit-transition: width .6s ease;
  transition: width .6s ease;
}

#approach #approach-diagram span {
  width: 185px;
  height: 164px;
  cursor: pointer;
  background: transparent;
  position: absolute;
}

#approach #approach-diagram span.retirement {
  top: 74px;
  left: 288px;
  cursor: pointer;
  transform: rotate(7deg);
}

#approach #approach-diagram span.investment {
  bottom: 225px;
  left: 380px;
  cursor: pointer;
}

#approach #approach-diagram span.tax {
  bottom: 110px;
  left: 379px;
  cursor: pointer;
}

#approach #approach-diagram span.legacy {
  bottom: -33px;
  left: 293px;
  cursor: pointer;
  transform: rotate( 7deg);
}

#approach #approach-diagram span.social {
  bottom: 112px;
  left: 58px;
  cursor: pointer;
}

#approach #approach-diagram span.insurance {
  bottom: 232px;
  left: 8px;
  cursor: pointer;
  transform: rotate( 18deg);
}

#approach #approach-diagram span.life {
  bottom: 12px;
  left: 148px;
  cursor: pointer;
}

#approach #approach-diagram span.college {
  bottom: 342px;
  left: 148px;
  cursor: pointer;
}

.col-lg-06 {
  width: 44%;
}

.col-lg-006 {
  width: 56%;
  margin-top: 35px;
  padding: 0px 1%;
}

.containerr {
  width: 100%;
}

#approach .approach-text {
  width: 100%;
  position: relative;
  display: none;
}

#approach .approach-text img {
  position: absolute;
  top: 0;
  left: 0;
}

#approach .approach-text p {
  margin-top: 30px;
}

#approach .approach-text ul {
  padding-left: 70px;
}

#approach .approach-text ul li {
  list-style: disc;
  padding: 5px 0;
}

#approach .approach-text h4,
#approach .approach-text .button-row {
  text-align: center;
  color: #1c315f;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="approach">
  <div class="containerr">
    <div class="clear"></div>
    <div class="col-lg-06 col-md-6 col-sm-6">
      <div id="approach-diagram" class="retirement-bg">
        <span class="retirement"></span>
        <span class="investment"></span>
        <span class="tax"></span>
        <span class="legacy"></span>
        <span class="life"></span>
        <span class="social"></span>
        <span class="college"></span>
        <span class="insurance"></span>
      </div>
    </div>
    <div class="col-lg-006 col-md-6 col-sm-6">
      <div id="always">
        <div class="alwaysh inh">We Are Holistic Advisors.</span>
        </div>
        <div class="alwayst">
          <p>A holistic financial advisor looks at your finances with a wide-angle lens. A holistic plan is not just an investment strategy, a single tax return, or an insurance policy. It is a comprehensive blueprint for your entire financial picture that
            addresses specific risks and pitfalls you may never have considered. As expert holistic advisors, we put all the pieces together to solve for your unique goals and fears.</p>
        </div>
      </div>
      <div id="retirement-text" class="approach-text" style="display: block">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Tax Reduction Strategies</h2>
        </div>
        <p>Any comprehensive Retirement Plan will include a strategy for tax liabilities. We work collaboratively with our two qualified CPAs in completing your plan.</p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>
      <div id="investment-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Legacy and Estate Planning</h2>
        </div>
        <p>It is important to ensure your hard-earned assets go to your beneficiaries in the most efficient manner. We work collaboratively with a qualified Estate Planning Attorney in completing your plan.  </p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>
      <div id="tax-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Tax Reduction Strategies</h2>
        </div>
        <p>Any comprehensive Retirement Plan will include a strategy for tax liabilities. We work collaboratively with our two qualified CPAs in completing your plan.</p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>
      <div id="legacy-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Retirement Income Planning</h2>
        </div>
        <p>Our goal is to help ensure your expenses can be paid month to month with reliability and predictability for the rest of your life. </p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>

      <div id="social-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Social Security Maximization</h2>
        </div>
        <p>Many Americans rely primarily on Social Security in retirement and while you may not be able to maintain your current lifestyle on it alone, it can make up a large portion of your retirement income. We will help you choose the optimal time to
          claim your Social Security benefits that fits your situation.</p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>
      <div id="insurance-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>College Planning</h2>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>

      <div id="life-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Life Insurance, Disability and Long-Term Care</h2>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>

      <div id="college-text" class="approach-text">
        <div class="cavt"> <i class="fas fa-caret-right" style="font-size: 24px;color: #9db4c0;"></i></div>
        <div>
          <h2>Investment Management</h2>
        </div>
        <p>Once your income is established, we will create an investment plan for the remaining assets that you do not need to draw from month to month.</p>
        <p style="text-align: right;"><a class="lm" href=“#”><strong>Learn More</strong></a></p>
      </div>

    </div>
  </div>
  </div>
</section>

如何将此 jquery 功能从 onclick 更改为悬停？

How to change this jquery function from onclick to hover?

javascript

jquery

css

mouseover

onmouseover