如何将此jquery函数从onclick更改为hover？

Question

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

我是新来的，所以我只是想学习 :) 任何人都愿意接受帮助新秀的挑战吗？

这是实时查看的链接 - 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>