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

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

在懸停時(shí)突出顯示一組元素

在懸停時(shí)突出顯示一組元素

不負(fù)相思意 2023-05-11 14:03:17
我正在嘗試根據(jù)數(shù)據(jù)評(píng)級(jí)標(biāo)簽在鼠標(biāo)懸停時(shí)為 1 到 5 個(gè)元素著色。我正確地獲取了數(shù)據(jù)，但是發(fā)生了幾件事：每次懸停時(shí)該功能被訪問(wèn) 5 次，而不是一次訪問(wèn)。所有元素都在鼠標(biāo)進(jìn)入時(shí)獲得顏色，然后所有 5 個(gè)元素在鼠標(biāo)離開(kāi)時(shí)被清除。我能感覺(jué)到有一種更簡(jiǎn)潔的方法可以做到這一點(diǎn)，尤其是在循環(huán)部分。我試圖在這里保持干燥，這肯定不是干燥的。HTML 部分<h2>  <i class="far fa-star" data-rating="1">1</i>  <i class="far fa-star" data-rating="2">2</i>  <i class="far fa-star" data-rating="3">3</i>  <i class="far fa-star" data-rating="4">4</i>  <i class="far fa-star" data-rating="5">5</i></h2>jQuery 部分：$('[class="far fa-star"]').mouseenter(function() {  var target = parseInt($(this).data('rating'));  for (i = 0; i < target; i++) {    $(this).parent().children(i).css('background-color', 'yellow');  }});$('[class="far fa-star"]').mouseleave(function() {  var target = parseInt($(this).data('rating'));  for (i = 4; i > target; i--) {    $(this).parent().children(i).css('background-color', 'transparent');  }});小提琴在這里 -小提琴
查看完整描述

5 回答

?
蕭十郎

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

我認(rèn)為其他人不明白你真正想要什么，我從你的問(wèn)題中了解到你想要為你的評(píng)級(jí)系統(tǒng)提供突出顯示功能，這是一個(gè)例子


// using event delegation to get the current mouse hovered star

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

  // only if the element is of type `<i>`

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

    // get the rating

    var rating = e.target.getAttribute("data-rating");

    // looping over the `<i>` elements and color them the correct way

    // so only from 0 to the current rating are yellow and the rest

    // are black and that makes sure the highlighting is updated even 

    // if the user keeps moving over the stars

    Array.prototype.forEach.call(this.children, (c, i) => c.style.color = i < rating ? "yellow" : "black");

  }

}


// reset the color of all the stars

document.querySelector("h2").onmouseleave = function() {

  Array.prototype.forEach.call(this.children, c => c.style.color = "black");

}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<h2>

  <i class="fas fa-star" data-rating="1"></i>

  <i class="fas fa-star" data-rating="2"></i>

  <i class="fas fa-star" data-rating="3"></i>

  <i class="fas fa-star" data-rating="4"></i>

  <i class="fas fa-star" data-rating="5"></i>

</h2>


查看完整回答
反對(duì) 回復(fù) 2023-05-11
?
梵蒂岡之花

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

你可以使用 :hover psudo class 在 css 中使用背景顏色



.yourclass:hover{


background-color: yellow;


}


查看完整回答
反對(duì) 回復(fù) 2023-05-11
?
慕神8447489

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

我認(rèn)為這是您要達(dá)到的效果：


$('[class="far fa-star"]').mouseenter(function () {

var target = parseInt($(this).data('rating'));


for (i = 0; i < target; i++) {

    $(this).parent().children().eq(i).css('background-color', 'yellow');

}

});

$('[class="far fa-star"]').mouseleave(function () {

var target = parseInt($(this).data('rating'));


for (i = 0; i < target; i++) {

    $(this).parent().children().eq(i).css('background-color', 'transparent');

}

});


查看完整回答
反對(duì) 回復(fù) 2023-05-11
?
哈士奇WWW

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

你可以使用 :hover psudo class 在 css 中使用背景顏色



.yourclass:hover{


background-color: yellow;


}


或者使用添加事件監(jiān)聽(tīng)器


查看完整回答
反對(duì) 回復(fù) 2023-05-11
?
米脂

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

看你的代碼，可以用CSS來(lái)實(shí)現(xiàn)。



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

添加回答

舉報(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)