带有php循环的CSS onmouseover库

我曾经使用CSS创建了一个图像库，它执行以下操作：

创建了一个缩略图库

创建了一个div，其中放置了1x1像素图像

---

在缩略图上方的鼠标上，这些1x1像素图像展开以适合div大小，高度与长度相关

到目前为止，我的代码是：

php:

现在我不知道该去哪里——任何帮助都是值得的——做这件事的其他方法也是

---

致以最诚挚的问候-Jesper

一个天真的程序员可能会推荐jQuery，或者在每个单独的图像上附加一个事件。下面是大男孩们是如何做到这一点的：

(function() {
  var box = document.getElementById('thumbnails'),
      handler = function(e) {
        e = e||window.event;
        var tar = e.target || e.srcElement,
            type = e.type, id = tar.id, m, img;
        if( (m=id.match(/^thumb(.*)$/)) && (img=document.getElementById('img'+m[1]))) {
          img.style.height = img.style.width = type == "mouseover" ? "auto" : "1px";
        }
      };
  if( typeof box.attachEvent != "undefined") {
    box.attachEvent('onmouseover',handler);
    box.attachEvent('onmouseout',handler);
  }
  else {
    box.addEventListener('mouseover',handler);
    box.addEventListener('mouseout',handler);
  }
})();

您需要对HTML进行的唯一更改是从图像中删除

width=“1px”height=“1px”

，而是添加

width:1px；高度：1px；最大宽度：800px；最大高度：600px到图像的样式。这最好在CSS文件中完成：

#gallery>img {
    position: absolute;
    left: 0; top: 0;
    width: 1px; height: 1px;
    max-width: 800px;
    max-height: 600px;
}


jsfiddle显示了onMouseOver与javascript函数一起使用，用于在鼠标悬停在缩略图上时放大1px；onMouseOut与javascript函数一起使用，用于在鼠标移离缩略图时缩小放大的1px图像
 我看不到有人试图真正实现鼠标悬停。我想创建一个CSS样式，比如.thumb[$I]：hover{img[$I]：height 500px；}，这当然不起作用，因为我的CSS文件无法识别php。不幸的是，您必须等到CSS4才能找到解决此问题的纯CSS解决方案。同时，只需要一些基本的JavaScript就可以了，“高度与长度相关”？高度=长度长度=宽度，哎呀。相对于长度的高度，这意味着图像的宽度相对于您设置的高度按百分比缩小。我添加了“$（document）.ready”-是/否？我已尝试更正括号我已尝试将脚本添加到jquery.js文件并调用此脚本：。。。似乎什么都不起作用：/else警报（“错误”）；如果（…）不起作用，@Kolink，你能再看一次吗？先试试
alert（id）
，然后再试试
alert（id.match（/^thumb（.*）$/）
），然后再试试
alert（img）
。对不起，我似乎错过了一些
）
，显然我使用
attachEvent/addEventListener的“聪明”技巧不起作用。我已经改正了错误。
(function() {
  var box = document.getElementById('thumbnails'),
      handler = function(e) {
        e = e||window.event;
        var tar = e.target || e.srcElement,
            type = e.type, id = tar.id, m, img;
        if( (m=id.match(/^thumb(.*)$/)) && (img=document.getElementById('img'+m[1]))) {
          img.style.height = img.style.width = type == "mouseover" ? "auto" : "1px";
        }
      };
  if( typeof box.attachEvent != "undefined") {
    box.attachEvent('onmouseover',handler);
    box.attachEvent('onmouseout',handler);
  }
  else {
    box.addEventListener('mouseover',handler);
    box.addEventListener('mouseout',handler);
  }
})();

#gallery>img {
    position: absolute;
    left: 0; top: 0;
    width: 1px; height: 1px;
    max-width: 800px;
    max-height: 600px;
}