悬停显示随机图像

Question

I am looking for a way to show a random image upon hovering some text or a div.

Tried a few CSS ways but I don't think it's possible without jQuery or Javascript, either is fine.

My (way overcomplicated) idea was using a random script such as

Math.floor(Math.random() * 10);

then using a few nested if statements (I know) to add or remove classes on the images files which 4/5 (orwhatever) would have hidden tags and the random one would get it removed. I couldn't even figure that out and I definitely think its a messy way to solve this. Does anyone have a better idea? Thanks so much!

Answer 1

You could have the image urls in an array and pick one randomly when the user hovers over the text.

eg

 var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]; function getRandomImage() { var index = Math.floor(Math.random() * arr.length); return arr[index]; } $("#div").hover( function() { var image = getRandomImage(); $("#img").attr("src", image); console.log(image); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div">hover over me</div> <img id="img" />