悬停时的随机背景图像

Question

在我的主页网站上，我有 6 个图块，我想更改悬停效果的背景。我在下面找到了 PHP 脚本，但有些东西无法正常工作

在我的 index.php 标签下面的文件中，U 把下面的代码

  <?php
  $bg = array('nasa1-400.jpg', 'nasa1-1200.jpg', 'nasa1-640.jpg'); // array of filenames
  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

在我的 CSS 文件中，我使用以下代码

 div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
  background: url(images/bg/<?php echo $selectedBg; ?>) no-repeat;
 }

我是不是漏掉了什么？

Answer 1

css 代码在 css 文件中不起作用。因为那里有一些 php 代码。所以如果你想运行它，你必须在 php/html 文件中使用 css 代码。 example.php:

<html>
<head>
...
 <style>
 div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
  background: url(images/bg/<?php echo $selectedBg; ?>) no-repeat;
 }
</style>
</head>
<body>

所以您的 index.php 页面可能是这样的：

<html>
<head>
<?php
  $bg = array('nasa1-400.jpg', 'nasa1-1200.jpg', 'nasa1-640.jpg'); // array of filenames
  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
 <style>
 div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
  background: url(images/bg/<?php echo $selectedBg; ?>) no-repeat;
 }
</style>
</head>
<body>

每当您刷新页面时，此代码都会向您显示新的背景图片。如果你想在每次悬停时显示一个新图像而不需要刷新页面，那么你必须使用 javascript 代码或 javascript + ajax（用于获取新图像作为实时图像） .

已编辑：

为此首先建立一个名为 rmdimage.php

的页面

<?php
  $bg = array('nasa1-400.jpg', 'nasa1-1200.jpg', 'nasa1-640.jpg'); // array of filenames
  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
  echo $selectedBg;

你index.php文件：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
 $("div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)").hover(function(){
  $.get("[path-to-php-folder]/rmdimage.php", function(data, status){
  $("div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)").css('background', 'url(images/bg/' + data +') no-repeat;');
    
    //alert("Data: " + data + "\nStatus: " + status);
  });
 });
</script>
 
</head>
<body>
 <div class="my-element" style="width:100px; height:100px;">this is my fav element!</div>

您必须将 [path-to-php-folder] 更改为关系 rmdimage.php 文件。
在 rndimage.php 文件中您可以动态调整图像数组 ($bg)

您可以从 mysql 或文件夹中获取它们，...

悬停时的随机背景图像

Random background image on hover

css

php

image

hover