悬停时突出显示所有数字

Question

我必须使用 html 和 css 创建一个进度条时间线。这是输出的快照： 输出当前当前它在第 4 个数字上是静态的，所有以前的数字都突出显示。我想要的是，当用户将鼠标悬停在 3 或 4 或任何数字上时，所有以前的包括当前的都变为活动状态，我试过了但还没有成功。这是我的 JSFiddle： https: //jsfiddle.net/4ypjufmo/1/ 非常感谢任何帮助

 @import "compass/css3";

 li {

     width: 2em;

     height: 2em;

     text-align: center;

     line-height: 2em;

     border-radius: 1em;

     background: dodgerblue;

     margin: 0 1em;

     display: inline-block;

     color: white;

     position: relative;

}

 li::before {

     content: '';

     position: absolute;

     top: 0.9em;

     left: -4em;

     width: 4em;

     height: 0.2em;

     background: dodgerblue;

     z-index: -1;

}

 li:first-child::before {

     display: none;

}

 .active {

     background: dodgerblue;

}

 .active ~ li {

     background: lightblue;

}

 .active ~ li::before {

     background: lightblue;

}

 body {

     font-family: sans-serif;

     padding: 2em;

}

Answer 1

此方法使用 javascript 识别哪个项目具有mouseover，然后将active类添加到之前的所有项目。这些元素将保留它们的active类，直到将鼠标悬停在会导致活动类被删除的元素上为止。请注意，我还向您的<li>元素添加了数据属性，以便更轻松地处理它们：let liArray = document.querySelectorAll("li");liArray.forEach( (element) =>&nbsp;&nbsp; &nbsp;element.addEventListener("mouseover",&nbsp; &nbsp; &nbsp; &nbsp; function( event ) {&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; doHighlights(+event.target.dataset.step);&nbsp; &nbsp; }));function doHighlights(inStep) {&nbsp; &nbsp;let liArray = document.querySelectorAll("li");&nbsp; &nbsp;//console.log(inStep);&nbsp; &nbsp;liArray.forEach( (element) => {&nbsp; &nbsp; &nbsp; //console.log(+element.dataset.step, inStep);&nbsp; &nbsp; &nbsp; &nbsp; if (+element.dataset.step <= inStep) {&nbsp; &nbsp; &nbsp; &nbsp; element.classList.add("active");&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;element.classList.remove("active");&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;})}@import "compass/css3";li {&nbsp; width: 2em;&nbsp; height: 2em;&nbsp; text-align: center;&nbsp; line-height: 2em;&nbsp; border-radius: 1em;&nbsp; background: lightblue;&nbsp; margin: 0 1em;&nbsp; display: inline-block;&nbsp; color: white;&nbsp; position: relative;}li::before {&nbsp; content: '';&nbsp; position: absolute;&nbsp; top: 0.9em;&nbsp; left: -4em;&nbsp; width: 4em;&nbsp; height: 0.2em;&nbsp; background: lightblue;&nbsp; z-index: -1;}li.active::before {&nbsp; background: dodgerblue;}li:first-child::before {&nbsp; display: none;}li.active {&nbsp; background: dodgerblue;}body {&nbsp; &nbsp; &nbsp;font-family: sans-serif;&nbsp; &nbsp; &nbsp;padding: 2em;}/*&nbsp;.active ~ li {&nbsp; &nbsp; &nbsp;background: lightblue;}&nbsp;.active ~ li::before {&nbsp; &nbsp; &nbsp;background: lightblue;}*//*li:hover {&nbsp; background: dodgerblue;}*/<ul>&nbsp; <li data-step="1">1</li>&nbsp; <li data-step="2">2</li>&nbsp; <li data-step="3">3</li>&nbsp; <li data-step="4">4</li>&nbsp; <li data-step="5">5</li>&nbsp; <li data-step="6">6</li>&nbsp; <li data-step="7">7</li></ul>&nbsp;&nbsp;（此处为 JSFiddle 版本：https://jsfiddle.net/79hwa6s4/）

Answer 2

这很容易！您所要做的就是从HTML 文件的 li 标签中删除active (Class) ，并在 CSS 文件中将.active替换为li:hover。JSFiddle ::&nbsp;https://jsfiddle.net/chbej806/2/变化=> HTML<ul>&nbsp; <li>1</li>&nbsp; <li>2</li>&nbsp; <li>3</li>&nbsp; <li>4</li>&nbsp; <li>5</li>&nbsp; <li>6</li>&nbsp; <li>7</li></ul>&nbsp;&nbsp;=> CSS@import "compass/css3";&nbsp;li {&nbsp; &nbsp; &nbsp;width: 2em;&nbsp; &nbsp; &nbsp;height: 2em;&nbsp; &nbsp; &nbsp;text-align: center;&nbsp; &nbsp; &nbsp;line-height: 2em;&nbsp; &nbsp; &nbsp;border-radius: 1em;&nbsp; &nbsp; &nbsp;background: dodgerblue;&nbsp; &nbsp; &nbsp;margin: 0 1em;&nbsp; &nbsp; &nbsp;display: inline-block;&nbsp; &nbsp; &nbsp;color: white;&nbsp; &nbsp; &nbsp;position: relative;}&nbsp;li::before {&nbsp; &nbsp; &nbsp;content: '';&nbsp; &nbsp; &nbsp;position: absolute;&nbsp; &nbsp; &nbsp;top: 0.9em;&nbsp; &nbsp; &nbsp;left: -4em;&nbsp; &nbsp; &nbsp;width: 4em;&nbsp; &nbsp; &nbsp;height: 0.2em;&nbsp; &nbsp; &nbsp;background: dodgerblue;&nbsp; &nbsp; &nbsp;z-index: -1;}&nbsp;li:first-child::before {&nbsp; &nbsp; &nbsp;display: none;}&nbsp;li:hover{&nbsp; &nbsp; &nbsp;background: dodgerblue;&nbsp; &nbsp;cursor: pointer;}&nbsp;li:hover ~ li {&nbsp; &nbsp; &nbsp;background: lightblue;}&nbsp;li:hover ~ li::before {&nbsp; &nbsp; &nbsp;background: lightblue;}&nbsp;body {&nbsp; &nbsp; &nbsp;font-family: sans-serif;&nbsp; &nbsp; &nbsp;padding: 2em;}

Answer 3

activeIndex = -1;$("#my-progress li").each(function(index){&nbsp; if($(this).hasClass("active"))&nbsp; &nbsp; activeIndex = index;})$("#my-progress li").mouseover(function(index){&nbsp; $("#my-progress li").removeClass("active");&nbsp; $(this).addClass("active");})$("#my-progress li").mouseout(function(index){&nbsp; $("#my-progress li").removeClass("active");&nbsp; $($("#my-progress li")[activeIndex]).addClass("active");})li {&nbsp; &nbsp; &nbsp;width: 2em;&nbsp; &nbsp; &nbsp;height: 2em;&nbsp; &nbsp; &nbsp;text-align: center;&nbsp; &nbsp; &nbsp;line-height: 2em;&nbsp; &nbsp; &nbsp;border-radius: 1em;&nbsp; &nbsp; &nbsp;background: dodgerblue;&nbsp; &nbsp; &nbsp;margin: 0 1em;&nbsp; &nbsp; &nbsp;display: inline-block;&nbsp; &nbsp; &nbsp;color: white;&nbsp; &nbsp; &nbsp;position: relative;&nbsp; &nbsp;cursor:pointer}&nbsp;li::before {&nbsp; &nbsp; &nbsp;content: '';&nbsp; &nbsp; &nbsp;position: absolute;&nbsp; &nbsp; &nbsp;top: 0.9em;&nbsp; &nbsp; &nbsp;left: -4em;&nbsp; &nbsp; &nbsp;width: 4em;&nbsp; &nbsp; &nbsp;height: 0.2em;&nbsp; &nbsp; &nbsp;background: dodgerblue;&nbsp; &nbsp; &nbsp;z-index: -1;}&nbsp;li:first-child::before {&nbsp; &nbsp; &nbsp;display: none;}&nbsp;.active {&nbsp; &nbsp; &nbsp;background: dodgerblue;}&nbsp;.active ~ li {&nbsp; &nbsp; &nbsp;background: lightblue;}&nbsp;.active ~ li::before {&nbsp; &nbsp; &nbsp;background: lightblue;}&nbsp;body {&nbsp; &nbsp; &nbsp;font-family: sans-serif;&nbsp; &nbsp; &nbsp;padding: 2em;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul id="my-progress">&nbsp; <li>1</li>&nbsp; <li>2</li>&nbsp; <li>3</li>&nbsp; <li class="active">4</li>&nbsp; <li>5</li>&nbsp; <li>6</li>&nbsp; <li>7</li></ul>如果你想将鼠标悬停在项目上冻结而不是恢复到最后状态......从你的脚本中删除以下代码：$("#my-progress li").mouseout(function(index){&nbsp; $("#my-progress li").removeClass("active");&nbsp; $($("#my-progress li")[activeIndex]).addClass("active");})

Answer 4

好吧，你为什么不为此使用 JavaScript，只是为了改变哪个<li>元素有类"active"，这里是你如何做到的，我写了一些评论来帮助你理解代码// an event delegation for the ul on hoverdocument.querySelector("ul").onmouseover = function(e) {&nbsp; // get the current active <li> element to disactivate it later&nbsp; let element = this.querySelector(".active");&nbsp; // if the current hovered element is a <li> element&nbsp; if(e.target.nodeName === "LI") {&nbsp; &nbsp; // just activate the current hovered element&nbsp; &nbsp; e.target.classList.add("active");&nbsp; &nbsp; // and disactivate the old one only if we found one&nbsp; &nbsp; element !== e.target && (element.classList.remove("active"));&nbsp; }}@import "compass/css3";li {&nbsp; &nbsp; &nbsp;width: 2em;&nbsp; &nbsp; &nbsp;height: 2em;&nbsp; &nbsp; &nbsp;text-align: center;&nbsp; &nbsp; &nbsp;line-height: 2em;&nbsp; &nbsp; &nbsp;border-radius: 1em;&nbsp; &nbsp; &nbsp;background: dodgerblue;&nbsp; &nbsp; &nbsp;margin: 0 1em;&nbsp; &nbsp; &nbsp;display: inline-block;&nbsp; &nbsp; &nbsp;color: white;&nbsp; &nbsp; &nbsp;position: relative;}&nbsp;li::before {&nbsp; &nbsp; &nbsp;content: '';&nbsp; &nbsp; &nbsp;position: absolute;&nbsp; &nbsp; &nbsp;top: 0.9em;&nbsp; &nbsp; &nbsp;left: -4em;&nbsp; &nbsp; &nbsp;width: 4em;&nbsp; &nbsp; &nbsp;height: 0.2em;&nbsp; &nbsp; &nbsp;background: dodgerblue;&nbsp; &nbsp; &nbsp;z-index: -1;}&nbsp;li:first-child::before {&nbsp; &nbsp; &nbsp;display: none;}&nbsp;.active {&nbsp; &nbsp; &nbsp;background: dodgerblue;}&nbsp;.active ~ li {&nbsp; &nbsp; &nbsp;background: lightblue;}&nbsp;.active ~ li::before {&nbsp; &nbsp; &nbsp;background: lightblue;}&nbsp;body {&nbsp; &nbsp; &nbsp;font-family: sans-serif;&nbsp; &nbsp; &nbsp;padding: 2em;}<ul>&nbsp; <li class="active">1</li>&nbsp; <li>2</li>&nbsp; <li>3</li>&nbsp; <li>4</li>&nbsp; <li>5</li>&nbsp; <li>6</li>&nbsp; <li>7</li></ul>