嘿，伙计们，我有一个粗略的元素，我正在工作。它是一个服务轮盘，当用户点击一个服务时，右边的文本会变成一个新的跨度，以显示一个代表该特定服务的短段落。我遇到的麻烦是把它带到下一个层次。我希望每项服务的文本(减税策略，遗产&遗产规划)等…在鼠标悬停时显示(与图像变化同时显示，例如图像在鼠标悬停时发生变化)，而不是在单击时显示。
我是新来的，所以我只是想学习:)有人愿意接受帮助新手的挑战吗?
这里是实时查看它的链接https://wendyd58.sg-host.com/轮
这是我使用的。
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>监听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("#approach-diagram span").on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
});