Question

你如何随机化悬停效果？

例如：

<p>test</p>

p:hover {
background: yellow;
}

p:hover:
background: red;
}

请注意，上述内容仅供参考。问题是，如何随机化悬停效果，以便在background:yellow;上以随机顺序显示background:red;和onmouseover？

不应该有任何顺序，例如：在第一次悬停时 - 添加一个类，第二个 - 另一个。它应该完全随机。

Answer 1

使用以下函数获取随机颜色并使用鼠标悬停事件更改背景颜色。

function getRandomColor () {
 var letters = '0123456789ABCDEF'.split('');
 var color = '#';
 for (var i = 0; i < 6; i++) {
     color += letters[Math.floor(Math.random() * 16)];
 }
 return color;
    }
})

$( "p" ).mouseover(function() {
$(this).css("background",getRandomColor());
});

请检查Fiddle。

Answer 2

您可以在悬停时向该元素添加一个随机类，并在悬停事件完成后将其删除。

如果您有以下CSS：

.yellow {
  background: yellow;
}

.red {
  background: red;
}

您可以使用以下jQuery代码示例：

// Declare all classes that can be used in the random selection
var classes = ['yellow', 'red'];

$("p").hover(
  function() {
    // Select a random class
    var randomClass = classes[Math.floor(Math.random() * classes.length)];

    $(this).addClass(randomClass);
  }, function() {
    $(this).removeClass();
  }
);

您可以查看this Fiddle上的示例。

使用classes函数在Math.random()数组上进行随机选择。

Answer 3

＆＃13;

$(document).ready(function(){

$("p[data-random]").mouseover(function(){
	max_value=5;
	random_value= Math.floor((Math.random() * max_value) + 1);
	$(this).attr("data-random",random_value);
});
})

＆＃13;

p[data-random]{
	padding: 10px;
    border:1px solid black;
}

p[data-random]:hover {
	cursor: pointer
}

p[data-random="1"]:hover {
	background: yellow;
}
p[data-random="2"]:hover {
	background: red;
}
p[data-random="3"]:hover {
	background: black;
}
p[data-random="4"]:hover {
	background: white;
}
p[data-random="5"]:hover {
	background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p data-random="1">Hello</p>

＆＃13;

这是在背景上做随机效果的最佳方法，这里我考虑了5种颜色的随机效果。

Answer 4

您应该使用javascript设置不同的类。

例如类似的东西（jquery）：

 var randomClasses = ['class1','class2','class3'];
$('p').mouseover(function(){
 $(this).toggleClass(function() {
   var randomColor = randomClasses[getRandomInt(0,randomClasses.length-1)];
   return randomColor;
 });    
})


function getRandomInt(min, max)
{
   return Math.floor(Math.random() * (max - min + 1)) + min;
}

Answer 5

我测试了它并且它有效......在这里，你有一个简单的方法。您可能需要addClass和removeClass。这取决于你的上帝......

.p1:hover {
background: yellow;
}

.p2:hover{
background: red;
}

.p3:hover{
background: blue;
}

// And so on...

setRandomHover(function() {
  var number = 1 + Math.floor(Math.random() * 6);
  if (number == 1)
  {
    $('#your_div').attr('class','p1');
  } else if (number == 2)
  {
    $('#your_div').attr('class','p2');
  }
  // And so on...
};

随机悬停效果

5 个答案: