随机悬停效果

Random Hover Effects

本文关键字：悬停 随机      更新时间：2023-09-26

如何随机化悬停效果？

例如：

<p>test</p>
p:hover {
background: yellow;
}
p:hover:
background: red;
}

请注意，以上仅为示例。问题是，如何随机化悬停效果，使其在onmouseover上按随机顺序显示background:yellow;和background:red;一次？

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

使用以下函数获取随机颜色，并使用mouseover事件更改背景颜色。

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。

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

如果你有以下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();
  }
);

你可以在这个Fiddle上查看一个例子。

使用Math.random()函数对classes阵列进行随机选择。

$(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);
});
})
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p data-random="1">Hello</p>

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

您应该使用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;
}
相关文章：