javascript - 如何将此 jquery 函数从 onclick 更改为悬停？

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=“#”&gt;<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=“#”&gt;<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=“#”&gt;<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=“#”&gt;<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=“#”&gt;<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=“#”&gt;<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=“#”&gt;<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=“#”&gt;<strong>Learn More</strong></a></p>
      </div>

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

标签： javascriptjquerycssmouseoveronmouseover

Answer 1

监听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=“#”&gt;<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=“#”&gt;<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=“#”&gt;<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=“#”&gt;<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=“#”&gt;<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=“#”&gt;<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=“#”&gt;<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=“#”&gt;<strong>Learn More</strong></a></p>
      </div>

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