Question

我有这个脚本在悬停时随机化我的边框img的颜色，但是当我离开img时它也会删除我的基本边框..（从一开始我的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

您只需修改第二个功能即可将边框设置为灰色。

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

Answer 2

您好，您可以通过删除内联样式属性

轻松完成此操作

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

在悬停时随机化边框颜色

2 个答案: