第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

懸停時(shí)突出顯示所有數(shù)字

懸停時(shí)突出顯示所有數(shù)字

四季花海 2023-05-19 17:15:02
我必須使用 html 和 css 創(chuàng)建一個(gè)進(jìn)度條時(shí)間線。這是輸出的快照：?輸出當(dāng)前當(dāng)前它在第 4 個(gè)數(shù)字上是靜態(tài)的，所有以前的數(shù)字都突出顯示。我想要的是，當(dāng)用戶將鼠標(biāo)懸停在 3 或 4 或任何數(shù)字上時(shí)，所有以前的包括當(dāng)前的都變?yōu)榛顒?dòng)狀態(tài)，我試過(guò)了但還沒(méi)有成功。這是我的 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貢獻(xiàn)1872條經(jīng)驗(yàn) 獲得超4個(gè)贊

此方法使用 javascript 識(shí)別哪個(gè)項(xiàng)目具有mouseover，然后將active類添加到之前的所有項(xiàng)目。這些元素將保留它們的active類，直到將鼠標(biāo)懸停在會(huì)導(dǎo)致活動(dòng)類被刪除的元素上為止。


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


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/）



查看完整回答
反對(duì) 回復(fù) 2023-05-19
?
慕少森

TA貢獻(xiàn)2019條經(jīng)驗(yàn) 獲得超9個(gè)贊

這很容易！您所要做的就是從HTML 文件的 li 標(biāo)簽中刪除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;

}


查看完整回答
反對(duì) 回復(fù) 2023-05-19
?
蝴蝶不菲

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊

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>

如果你想將鼠標(biāo)懸停在項(xiàng)目上凍結(jié)而不是恢復(fù)到最后狀態(tài)......從你的腳本中刪除以下代碼：

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

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

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

})


查看完整回答
反對(duì) 回復(fù) 2023-05-19
?
慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

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


// 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>


查看完整回答
反對(duì) 回復(fù) 2023-05-19
  • 4 回答
  • 0 關(guān)注
  • 203 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)