How to change this jquery function from onclick to hover?

Question

Hey guys I have a rough element I am working on. It's a wheel of services and when someone clicks on a service the text to the right changes to a new span to show a short paragraph representing that specific service. The trouble I am having is taking this to the next level. I wish for the text on each service (Tax Reduction Strategies, Legacy & Estate Planning) Etc... To show on mouse over (at the same time as the image change, like the image changes on mouse over) and not on click.

I'm new here so I am just trying to learn :) Anyone up for the challenge of helping a rookie out?

Here is the link to see it in realtime - https://wendyd58.sg-host.com/#wheel

Here is what I am using.

 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

You can do something like this:

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

Answer 2

Listen for the mouseenter event:

 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>