javascript - 悬停时更改进度条跨度文本-6ren

javascript - 悬停时更改进度条跨度文本

转载作者：行者123 更新时间：2023-11-28 16:50:24

我有 2 个折叠选项卡，每个选项卡上显示 5 个进度条。我想要进度条百分比，例如'79%'，更改为显示等级，例如当用户将鼠标悬停在栏上时为“B+”。我怎样才能做到这一点？

第二个问题:我想让每个选项卡折叠另一个选项卡，例如当我选择“第一学期”时，我希望隐藏“第二学期”，反之亦然。如果我关闭“第 1 学期”，我希望显示“第 2 学期”等。

https://jsfiddle.net/oed6vbt9/

代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>



  <section id="education" style="background-color:whitesmoke;">
    <div class="container">
      <div class="row d-flex no-gutters">
        <div class="col-lg-12 mx-auto">
          <h2 style="text-align: center;"> Education </h2>
          <br>
          <br>
          <br>
          <div class="pull-left" style="color: rgba(0, 0, 0, 0.801);">
            <h3>BSc in Computing</h3>
            <br>
          </div>
          <div class="row">
            <br>
            <br>

            <div class="col-md-4 disabled">

              <div class="tu-icon">
                <a target="_blank" href="https://www.it-tallaght.ie/">
                  <img class="mx-auto mb-2" src="tudub.png" alt="about"
                    style="width: 100%; height: 100%; border:2px solid #000000">
                </a>
              </div>
            </div>


            <div class="col-md-8">

              <!--nav tabs-->
              <div class="tabs">
                <ul class="nav nav-tabs" role="tablist">
                  <li role="presentation" class="active">
                    <a href="#first" data-toggle="tab"> First Year </a>
                  </li>
                  <li role="presentation">
                    <a href="#second" data-toggle="tab"> Second Year </a>
                  </li>
                </ul>
              </div>
              <!--Start single tab content-->
              <div class="tab-content">

                <div class="service-box tab-pane fade in active row show" id="first">
                  <div class="contents">

                    <div class="section-title">
                      <br>
                      <h4 style="color: rgba(0, 0, 0, 0.801);"> First Year</h4>
                      <br>
                    </div>



                    <div class="col-md-8 animate-box">




                      <div class="panel-group" id="accordion">
                        <!--Collapse Semester 1-->
                        <div class="panel panel-default show">
                          <div class="panel-heading">
                            <h4 class="panel-title">
                              <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Semester 1</a>
                            </h4>
                          </div>
                          <div id="collapse1" class="panel-collapse collapse in show">
                            <div class="panel-body">

                              <!--progress bars-->

                              <h5>Software Development B+</h5>
                              <div class="progress" style="width: 100%;">
                                <div class="progress-bar  color-1" role="progressbar" aria-valuenow="79"
                                  aria-valuemin="0" aria-valuemax="100" style="width:79%">
                                  <span>79%</span>
                                </div>
                              </div>
                              <br>
                              <h5>Business Information Systems B</h5>
                              <div class="progress" style="width: 100%;">
                                <div class="progress-bar  color-1" role="progressbar" aria-valuenow="69"
                                  aria-valuemin="0" aria-valuemax="100" style="width:69%">
                                  <span>69%</span>
                                </div>
                              </div>
                              <br>
                              <h5>Visual Design B-</h5>
                              <div class="progress" style="width: 100%;">
                                <div class="progress-bar  color-1" role="progressbar" aria-valuenow="59"
                                  aria-valuemin="0" aria-valuemax="100" style="width:59%">
                                  <span>59%</span>
                                </div>
                              </div>
                              <br>
                              <h5>Systems Analysis B</h5>
                              <div class="progress" style="width: 100%;">
                                <div class="progress-bar  color-1" role="progressbar" aria-valuenow="69"
                                  aria-valuemin="0" aria-valuemax="100" style="width:69%">
                                  <span>69%</span>
                                </div>
                              </div>
                              <br>
                              <h5>Statistics B</h5>
                              <div class="progress" style="width: 100%;">
                                <div class="progress-bar  color-1" role="progressbar" aria-valuenow="69"
                                  aria-valuemin="0" aria-valuemax="100" style="width:69%">
                                  <span>69%</span>
                                </div>
                              </div>
                              <br>



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

                        <!--Collapse Semester 2-->
                        <div class="panel panel-default">
                          <div class="panel-heading">
                            <h4 class="panel-title">
                              <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Semester 2</a>
                            </h4>
                          </div>
                          <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">

                              <!--progress bars-->


                              <h5>Software Development 2 B</h5>
                              <div class="progress" style="width: 100%;">
                                <div class="progress-bar  color-1" role="progressbar" aria-valuenow="68"
                                  aria-valuemin="0" aria-valuemax="100" style="width:68%">
                                  <span>68%</span>
                                </div>
                              </div>
                              <br>
                              <h5>Introduction to Operating Systems B</h5>
                              <div class="progress" style="width: 100%;">
                                <div class="progress-bar  color-1" role="progressbar" aria-valuenow="69"
                                  aria-valuemin="0" aria-valuemax="100" style="width:69%">
                                  <span>69%</span>
                                </div>
                              </div>
                              <br>
                              <h5>Web and Datasbase Fundementals B-</h5>
                              <div class="progress" style="width: 100%;">
                                <div class="progress-bar  color-1" role="progressbar" aria-valuenow="59"
                                  aria-valuemin="0" aria-valuemax="100" style="width:59%">
                                  <span>59%</span>
                                </div>
                              </div>
                              <br>
                              <h5>Discrete Mathematics B-</h5>
                              <div class="progress" style="width: 100%;">
                                <div class="progress-bar  color-1" role="progressbar" aria-valuenow="59"
                                  aria-valuemin="0" aria-valuemax="100" style="width:59%">
                                  <span>59%</span>
                                </div>
                              </div>
                              <br>
                              <h5>Systems Analysis 2 B</h5>
                              <div class="progress" style="width: 100%;">
                                <div class="progress-bar  color-1" role="progressbar" aria-valuenow="69"
                                  aria-valuemin="0" aria-valuemax="100" style="width:69%">
                                  <span>69%</span>
                                </div>
                              </div>
                              <br>


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

                      </div>






                    </div>
                  </div>
                </div>
                <!--End single tab content-->
                <!--Start single tab content-->
                <div class="service-box tab-pane fade in" id="second">
                  <div class="contents">

                    <div class="section-title">
                      <br>
                      <h3> Second Year</h3>
                      <br>
                    </div>

                    <div class="col-md-8 animate-box">
                      <div class="progress-wrap">
                        <h3>Java</h3>
                        <div class="progress" style="width: 100%;">
                          <div class="progress-bar color-1" role="progressbar" aria-valuenow="90" aria-valuemin="0"
                            aria-valuemax="100" style="width:90%">
                            <span>90%</span>
                          </div>
                        </div>
                      </div>
                      <br>

                      <div class="progress-wrap ftco-animate">
                        <h3>C#</h3>
                        <div class="progress">
                          <div class="progress-bar color-2" role="progressbar" aria-valuenow="85" aria-valuemin="0"
                            aria-valuemax="100" style="width:85%">
                            <span>85%</span>
                          </div>
                        </div>
                      </div>
                      <br>

                    </div>
                  </div>
                </div>
                <!--End single tab content-->



              </div>


            </div>

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

CSS:

section {
  padding: 150px 0;
}

header {
  padding: 156px 0 100px;
}

.it-icons a {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #4582EC;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 3.5rem;
  margin-right: 1rem;
}

.it-icons a:hover {
  transform: scale(1.3) rotate(20deg);
  background-color: skyblue;
}

.tu-icon a:hover {
  transform: rotate(5deg);
}


.os-icons a {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #4582EC;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 3.5rem;
  margin-right: 1rem;
}

.os-icons a:hover {
  transform: scale(1.3) rotate(20deg);
  background-color: skyblue;
}




.tabs .nav-tabs > li, .tabs .nav-pills > li {
  float: none;
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 5px;
}

.tabs .nav-tabs {
  text-align: center;
  border-bottom: 0;
  margin-bottom: 20px;
}

.tabs .nav-tabs li:not(:last-child) {
  margin-right: 10px;
}

.tabs .nav-tabs li a {
  text-transform: capitalize;
  font-size: 20px;
  padding: 10px 25px;
  border: 2px solid #4582EC;
  border-radius: 0;
  transition: all .3s ease;
  font-weight: 600;
  color: #4582EC;
  font-family: "Source Sans Pro", sans-serif;
}

.tabs .nav-tabs li a:hover {
  background: #4582EC;
  color: #fff;
  border: 2px solid #4582EC;
}

.tabs .nav-tabs li.active a {
  color: #fff;
  background: #4582EC;
  border: 2px solid #4582EC;
}

.service-box {
  position: relative;
  width: 100%;
}

.service-box .contents {
  margin-left: 30px;
}



.tab-content {
  position: relative;
  float: left;
  width: 100%;
  z-index: 99;
}

.service-box {
  position: relative;
  width: 100%;
}

.service-box .section-title h3 {
  position: relative;
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
  padding-bottom: 20px;
  margin-bottom: 45px;
  color: #000;
  text-transform: uppercase;
}

.service-box .section-title h3:before {
  position: absolute;
  left: 0px;
  content: '';
  bottom: 0px;
  background: #333333;
  height: 1px;
  width: 55px;
}

最佳答案

在 .progress-bar 中添加 2 个元素，一个用于百分比，一个用于等级。然后默认隐藏一个。然后根据父悬停切换可见性。

.progress .progress-bar > span {
  position:relative;
  height:100%;
}
.progress .progress-bar > span > * {
  position:absolute;
  top:0;
  transition: opacity .3s ease-out;
}

.progress .grade {
  opacity:0;
}

.progress:hover .grade {
  opacity:1;
}

.progress:hover .percentage {
  opacity:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="progress" style="width: 100%;">
  <div class="progress-bar  color-1" role="progressbar" aria-valuenow="79"
    aria-valuemin="0" aria-valuemax="100" style="width:79%">
    <span><span class="percentage">79%</span><span class="grade">B+</span></span>
  </div>
</div>

关于javascript - 悬停时更改进度条跨度文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59184253/

文章推荐： html - 未知背景颜色的 CSS 背景颜色脉冲动画

文章推荐： javascript - 向 jquery 函数添加缓动

文章推荐： javascript - 从外部源加载到 img 标签时更改 SVG 的填充颜色

文章推荐： javascript - 功能运行的次数多于需求的次数

html - 跨度、输入、跨度 100% 宽度 CSS 问题
这就是我现在正在做的事情。我在设计中使用 LESS CSS。我需要在指定输入之间放置 2 个跨度。所有元素的宽度都应为 100%。跨度应始终为 20px 宽度输入宽度可以根据屏幕宽度进行更改。谁能帮帮
html - 跨度/格内的奇数对齐
我有一个包含文本和输入字段的跨度。我想知道是否可以让文本左对齐，输入字段右对齐。 NAME: .textBox{ display:inline-block; width:450px
html - Angular 跨度
我有这个按钮，我想让它在我点击“选择”时调用方法，在我点击“更改”时调用另一个方法: Select Change 我尝试输入 (click)="method()"，但没有成功。我很
javascript - 无法在表情符号后输入文字(跨度)
我正在开发聊天应用程序 (cordova)，当我要在无法输入的表情符号后输入文本时，我在这段代码中遇到了问题 https://output.jsbin.com/radaref This i
链接中的 CSS 跨度
很抱歉，如果这是一个非常愚蠢的问题，但我是一名开发人员，目前我的设计技能很少，我在个人网站上工作并且遇到了一个小问题。我有一个带 ul 的顶部导航和 li元素。这些元素包含链接 . 跨度仅在链接悬
html - 证明两列布局(跨度)
fiddle :https://jsfiddle.net/burz4g8s/4/ 我的 HTML 包含多行双按钮对。服务器端应用程序在 JSP 循环中输出按钮，所以我无法控制各个按钮——我不能使用 d
android - 设置字母间距的字符样式/跨度
TextView.setLetterSpacing允许设置字母间距/字符间距。有没有对应的CharacterStyle / span class允许在 TextView? 中的文本子集上设置字母间距
layout - QML GridLayout 跨度
如何使洋红色矩形比红色矩形短 6 倍？ GridLayout { id: gridLayout anchors.fill: parent flo
twitter-bootstrap - Bootstrap 跨度
我最近开始使用 Twitter Bootstrap，但我似乎无法理解 span 的作用以及为什么会有不同的编号 span，例如 span4、span12？什么是偏移量以及它们何时使用？ (有时与跨度一
javascript - 跨度 jQuery 的总和
我正在尝试构建一个 jQuery 函数来计算跨度中的总数 var sumnormaltotal = 0; $('span[id^="normaloffertotalspan"]').each(func
Haskell - 跨度 elem : evaluation
我想知道haskell如何评估以下表达式。 span (`elem` ['A'..'Z']) "BOBsidneyMORGANeddy" 结果是 ("BOB","sidneyMORGANeddy")
javascript - 第一个空格后的 jquery 跨度
我有三个词，我想在第一个空格之后的内容周围添加一个跨度，所以 hello world 变成: hello world 和: hello world again 变成: hello world agai
css - 文本缩进一个包装的行内 block 跨度
我正在寻找纯 CSS 解决以下问题的方法。考虑以下 HTML: Some text Some text 两者都是正在显示元素 inline-block .如何在第二个的左侧
html - 容器底部定位 float 跨度
如何将 Span 放置在其容器的底部？我目前拥有的:http://jsfiddle.net/wRbax/2/ 我希望 .box 始终位于 .td 的底部 CSS .td { vertical
html - 有序列表中的 float 跨度
我试图在 li 中 float 两个 span。左跨度将有我的标签，在右跨度内我将构建一个具有嵌套跨度的图形。我有基本结构，但 chrome 将数字放在左侧跨度的末尾。我该如何解决这个问题？ HTML
javascript - 如何在文本编辑器中换行(跨度)单词
我有一个像这样的 JavaScript 变量: var text = "A businessman should be able to manage his business matters"; 我想
html - 重叠的 contenteditable 跨度
一些内容可编辑的框与其他框重叠，因此并非所有框都是可编辑的。我想保留与跨度位置中心对齐的文本，如下所示。我如何实现这一点？ span { margin: auto; text-alig
Firefox 和 contentEditable 跨度
我正在使用 WYSIWYG (InnovaEditor) 来编辑我网站上的内容，它适用于 Chrome、IE，主要适用于 Firefox，但 FF 有一个稍微令人讨厌的问题。我将 span 标签插入到
css - 跨度，额外 margin
这是我的 html: Settings Export Import 和CSS: span.button { float:right; margin-righ
css - 跨度 split ，如何避免？
这里是问题所在:http://jsfiddle.net/STG22/3/ 我希望 span 不会分成两个不同的行(就像上面示例中的第三行一样)。我该怎么做？ CSS: span { backg

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 悬停时更改进度条跨度文本