隨機顏色border-bottom：在元素後

-1

我導航中的鏈接有一個邊框底部懸停動畫，我希望將隨機顏色應用到底部。 This是整個代碼，到目前爲止，但我特別提到這一點：隨機顏色border-bottom：在元素後

#navigation li a:after { 
    content: ''; 
    display: block; 
    border-bottom: 2px solid #000; 
    width: 0; 
    position: absolute; 
    left: 0; 
    -webkit-transition: 0.6s ease; 
    transition: 0.6s ease; 
} 

#navigation li a:hover:after { 
    width: 100%; 
}

而不是「下邊框：2px的固體＃000」，我想爲邊界是一個隨機顏色（＃ff86b1，＃d162ff，＃9cbdff和＃4fff4f，如果有差別）。不幸的是，我一直無法找到其他人試圖做到這一點，所以任何指針都會超級讚賞。

來源

2017-01-22 jodietbh

我能發現這個問題的時候了：即使在您添加標記'javascript'，有在你的小提琴中沒有一個。 – usr2564301

你想只爲隨機顏色一次頁面加載，或每次用戶盤旋鏈接？ – br3t

@RadLexus：我想申請Javascript，但我一直無法找到合適的腳本。 – jodietbh

使用下面的jQuery代碼：

$("#navigation li a").each(function(){ 
var colors = ["#CCCCCC","#333333","#990099"]; //include your own colors 
var rand = Math.floor(Math.random()*colors.length); 
$(this).css("borderColor", colors[rand]); 
});

來源

2017-01-22 07:11:22 Aayush

這正是我想要的！乾杯！！ – jodietbh

歡迎。不要忘記包含jQuery庫，否則它根本無法工作。 – Aayush

爲此你必須編寫一些javascript代碼。我已經使用jQuery完成了，所以你必須在你的項目中包含jQuery自由。

https://jsfiddle.net/452LLs8e/2/

更新CSS是：一個{ 文字修飾：無 } #navigation { 保證金：0汽車; 寬度：100％; 溢出：隱藏; margin-top：20px; 位置：相對; line-height：24px; }

#navigation ul { 
width: 900px; 
margin: 0 auto; 
list-style:None; 
} 

#navigation li { 
display: inline-block; 
padding: 0px 50px 0px 20px; 
list-style:None; 
vertical-align: super; 
font-size: 20px; 
color: #000; 
text-align:center; 
} 

#navigation li a { 
font-size: 9px; 
    text-transform:uppercase; 
    letter-spacing:1px; 
    display:block; 
    position:relative; 
margin-bottom:-8px; 
letter-spacing:2px; 
color:#000; 
} 

#navigation li a:after { 
    content: ''; 
    display: block; 
    border-bottom: 2px solid; 
    border-color: inherit; 
    width: 0; 
    position: absolute; 
    left: 0; 
    -webkit-transition: 0.6s ease; 
    transition: 0.6s ease; 
} 

#navigation li a:hover:after { 
    width: 100%; 
}

JavaScript代碼：

var arrColor=['#ff86b1', '#d162ff', '#9cbdff', '#4fff4f']; 

var randIdx=parseInt(Math.random()*arrColor.length); 

$('#navigation li a').css('border-color',arrColor[randIdx]); 
console.log(arrColor[randIdx]);

來源

2017-01-22 07:07:12

請注意，只有刷新頁面時才更新顏色。 –

隨機顏色border-bottom：在元素後

回答

相關問題