如何将百分比与Jquery代码一起用于悬停淡入淡出

所以，我对网页设计很陌生，我一直在寻找方法来创建一个网站，使用百分比（具体来说，33.333%或三分之一）将网站分成三分之一，在每一个部分中，有一个图像将在悬停时淡入另一个图像

我花了一些时间寻找会褪色的jquery代码，但我一直在研究如何使用百分比将代码翻译成网站。此时，图像被固定在特定的大小，否则它们将开始重叠。基本上，我希望每个图像都占据自动高度页面的三分之一

HTML

Jquery

$(document).ready(function() {
   // when hover over any div inside div with class=photos, find
   // the grey image and change its opacity to 0
   // opacity = 0 - invisible, opacity = 1 - completely opaque
$('.images div').hover(
  function() {
      $(this)
      .find('img.on')
      .stop()
      .animate({ 'opacity': '0' }, 800);
  },
  function() {
      $(this)
      .find('img.on')
      .stop()
      .animate({ 'opacity': '1' }, 800);
  });

});

---

我觉得似乎有一个简单的解决方案，我只是非常不确定使用CSS元素来实现我想要的。感谢您提供的帮助。

您可以将百分比直接用于CSS。确切地说，它不会是第三个，但应该做到：

.images div {
float: left;
display: inline;
position: relative;
height: 500px;
width: 33%;
}

$(document).ready(function() {
   // when hover over any div inside div with class=photos, find
   // the grey image and change its opacity to 0
   // opacity = 0 - invisible, opacity = 1 - completely opaque
$('.images div').hover(
  function() {
      $(this)
      .find('img.on')
      .stop()
      .animate({ 'opacity': '0' }, 800);
  },
  function() {
      $(this)
      .find('img.on')
      .stop()
      .animate({ 'opacity': '1' }, 800);
  });

});

.images div {
float: left;
display: inline;
position: relative;
height: 500px;
width: 33%;
}