Javascript 悬停时运行不同的模式

我试图在每次将鼠标悬停在div（svg）上时生成一个随机模式

这是我目前的代码：

var items = ["#pattern-rect", "#pattern-circle", "#pattern-triangle","#pattern-star"];
$("div").hover(function(){
  $("g").css({"visibility": "visible"});
  var item = Math.floor(Math.random()*items.length);
  $("g").css({"fill": "url(items[item])"});
  }, function(){
  $("g").css({"visibility": "hidden"});
  });
$("g").css({"visibility": "hidden"});



  $("g").css({"fill": "url(items[item])"}); This line is not working.

应该是这样的：

$("g").css({"fill": "url(" + items[item] + ")"});

---

那么，在hover上运行不同模式的解决方案是什么呢@css（{“fill”：“url（items[item]）”}）@RobertLongson url不接受任何变量。你能简单地解释一下吗@RobertLongsonims是一个包含所有模式id的数组。item是一个变量，它从数组项生成随机索引。然后我将模式id分配给g元素$（“g”）.css（{“fill”：“url（items[item]）”}）；而且它不起作用。这是代码笔链接-@robertlongsonsanks。这很有效。我需要在悬停的div上生成唯一的模式。但当我使用随机javascript函数进行此操作时，它会连续多次生成相同的模式。如何解决这个问题。@KaranSingh现在你明白字符串文字和变量之间的区别了吗？@KaranSingh有很多可能的方法。例如：（1）检查新的随机数是否与上一个不同，或者（2）在开始时随机洗牌阵列（然后按顺序排列），而不是随机选择一个

$("g").css({"fill": "url(" + items[item] + ")"});