亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

懸停時突出顯示所有數字

懸停時突出顯示所有數字

四季花海 2023-05-19 17:15:02
我必須使用 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;}
查看完整描述

4 回答

?
守著一只汪

TA貢獻1872條經驗 獲得超4個贊

此方法使用 javascript 識別哪個項目具有mouseover，然后將active類添加到之前的所有項目。這些元素將保留它們的active類，直到將鼠標懸停在會導致活動類被刪除的元素上為止。


請注意，我還向您的<li>元素添加了數據屬性，以便更輕松地處理它們：


let liArray = document.querySelectorAll("li");

liArray.forEach( (element) => 

   element.addEventListener("mouseover",

        function( event ) {   

        doHighlights(+event.target.dataset.step);

    }

));


function doHighlights(inStep) {

   let liArray = document.querySelectorAll("li");

   //console.log(inStep);

   liArray.forEach( (element) => {

      //console.log(+element.dataset.step, inStep);

        if (+element.dataset.step <= inStep) {

        element.classList.add("active");

      } else {

         element.classList.remove("active");

      }

   })

}

@import "compass/css3";


li {

  width: 2em;

  height: 2em;

  text-align: center;

  line-height: 2em;

  border-radius: 1em;

  background: lightblue;

  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: lightblue;

  z-index: -1;

}


li.active::before {

  background: dodgerblue;

}


li:first-child::before {

  display: none;

}


li.active {

  background: dodgerblue;

}

body {

     font-family: sans-serif;

     padding: 2em;

}


/*

 .active ~ li {

     background: lightblue;

}

 .active ~ li::before {

     background: lightblue;

}

*/

/*

li:hover {

  background: dodgerblue;

}

*/

<ul>

  <li data-step="1">1</li>

  <li data-step="2">2</li>

  <li data-step="3">3</li>

  <li data-step="4">4</li>

  <li data-step="5">5</li>

  <li data-step="6">6</li>

  <li data-step="7">7</li>

</ul>  

（此處為 JSFiddle 版本：https://jsfiddle.net/79hwa6s4/）



查看完整回答
反對 回復 2023-05-19
?
慕少森

TA貢獻2019條經驗 獲得超9個贊

這很容易！您所要做的就是從HTML 文件的 li 標簽中刪除active (Class) ，并在 CSS 文件中將.active替換為li:hover。

JSFiddle :: https://jsfiddle.net/chbej806/2/

變化

=> HTML

<ul>

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

  <li>6</li>

  <li>7</li>

</ul>  

=> CSS


@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;

}

 li:hover{

     background: dodgerblue;

   cursor: pointer;

}

 li:hover ~ li {

     background: lightblue;

}

 li:hover ~ li::before {

     background: lightblue;

}

 body {

     font-family: sans-serif;

     padding: 2em;

}


查看完整回答
反對 回復 2023-05-19
?
蝴蝶不菲

TA貢獻1810條經驗 獲得超4個贊

activeIndex = -1;

$("#my-progress li").each(function(index){

  if($(this).hasClass("active"))

    activeIndex = index;

})

$("#my-progress li").mouseover(function(index){

  $("#my-progress li").removeClass("active");

  $(this).addClass("active");

})

$("#my-progress li").mouseout(function(index){

  $("#my-progress li").removeClass("active");

  $($("#my-progress li")[activeIndex]).addClass("active");

})

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;

   cursor:pointer

}

 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;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="my-progress">

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li class="active">4</li>

  <li>5</li>

  <li>6</li>

  <li>7</li>

</ul>

如果你想將鼠標懸停在項目上凍結而不是恢復到最后狀態......從你的腳本中刪除以下代碼：

$("#my-progress li").mouseout(function(index){

  $("#my-progress li").removeClass("active");

  $($("#my-progress li")[activeIndex]).addClass("active");

})


查看完整回答
反對 回復 2023-05-19
?
慕斯王

TA貢獻1864條經驗 獲得超2個贊

好吧，你為什么不為此使用 JavaScript，只是為了改變哪個<li>元素有類"active"，這里是你如何做到的，我寫了一些評論來幫助你理解代碼


// an event delegation for the ul on hover

document.querySelector("ul").onmouseover = function(e) {

  // get the current active <li> element to disactivate it later

  let element = this.querySelector(".active");

  // if the current hovered element is a <li> element

  if(e.target.nodeName === "LI") {

    // just activate the current hovered element

    e.target.classList.add("active");

    // and disactivate the old one only if we found one

    element !== e.target && (element.classList.remove("active"));

  }

}

@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;

}

<ul>

  <li class="active">1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

  <li>6</li>

  <li>7</li>

</ul>


查看完整回答
反對 回復 2023-05-19
  • 4 回答
  • 0 關注
  • 193 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號