ホバー上でボーダーカラーをランダムに設定する

Question

私はボーダー上のボーダーの色をランダムに設定するこのスクリプトを持っていますが、imgを残すと基本ボーダーも削除されます。私はこの境界線をそのままそこにとどめて、削除しないようにしたい）

script>  
$(function() { 
    var colors = ["#FC3E6B","#24FF00","#0087F9","#F9F900"]; 

    $('.grid-item-content').hover(
    function() { 
     var rand = Math.floor(Math.random()*colors.length); 

     $(this).css('border-style', 'solid'); 
     $(this).css('border-width', '10px'); 
     $(this).css('border-color', colors[rand]); 
    }, 
    function() { 
     $(this).css('border-style', 'none'); 
    } 
); 
}); 
</script> 

Answer 1

こんにちは、あなたは、インラインスタイル属性フィドル作業

$(function() { 
    var colors = ["#FC3E6B","#24FF00","#0087F9","#F9F900"]; 

    $('.grid-item-content').hover(
    function() { 
     var rand = Math.floor(Math.random()*colors.length); 
     $(this).css('border-style', 'solid'); 
     $(this).css('border-width', '1px'); 
     $(this).css('border-color', colors[rand]); 
    }, 
    function() { 
     $(this).removeAttr('style'); 
    } 
); 
}); 

を除去することによって、これを簡単に行うことができます。https://jsfiddle.net/jdro6qch/

Answer 2

境界線の灰色を設定するには、2番目の関数を変更するだけで済みます。

<script>  
$(function() { 
    var colors = ["#FC3E6B","#24FF00","#0087F9","#F9F900"]; 

    $('.grid-item-content').hover(
    function() { 
     var rand = Math.floor(Math.random()*colors.length); 

     $(this).css('border-style', 'solid'); 
     $(this).css('border-width', '10px'); 
     $(this).css('border-color', colors[rand]); 
    }, 
    function() { 
     $(this).css('border-style', 'solid'); 
     $(this).css('border-width', '10px'); 
     $(this).css('border-color', 'grey'); 
    } 
); 
}); 
</script>