Javascript 更改子元素的样式，以在父页面元素36次出现时悬停时显示唯一的div

我有36张照片。我目前有一个冗长和重复的方法，使用72个ID和72个css行。我认为它可以被一个指定子函数（或类似函数）的jQuery函数所取代，但我无法理解

当鼠标悬停在一个给定的缩略图上时，我想要一个带有自定义文本的自定义div，并调整img的大小，以显示浮动在屏幕中央

我以一种蛮力的方式成功地实现了我的目标：一点也不枯燥

<div class="left-pcontainer">
<div class="make-fixed">
<div id="art">
  <span class="subject-title">express - make stuff</span>

  <span id="art1">
    <img   src="p-imgs/candyCaneCircle.png" >
       <div id="smack1" class="smack-in-middle">
        <img  src="p-imgs/candyCaneCircle.png" style="width:100%;">
        <p style="float:right;">Hello World I love you!</p>  
        <p>Hello Candy Cane I love you!</p>  
        <p>You taste great</p>  
        <p>Why only in December?</p>  

      </div>      
  </span>          

  <span id="art2"> 
    <img  src="p-imgs/PirateCircle.png" >
      <div id="smack2" class="smack-in-middle">
          <img  src="p-imgs/PirateCircle.png" >
          <p>Yarr! Piracy!</p> 
          <p>and a bottle of rum</p> 
          <p>Land Ahoy</p> 
      </div> 
  </span>

我想在下面找到一些类似我的尝试

$('.art-item').children().hover(function(){
$(this).fadeIn(500);
}, function(){
(this).fadeOut(500);
});

我还以某种方式处理了棘手的问题，将图片大小重新调整为100%，以某种方式超过其id指定的30%

我在jQuery中的尝试隐藏了缩略图（我不想要），并且没有显示隐藏的div。我也尝试了next（）等，但没有找到正确的语法。

给“art1”、“art2”等一个类和一个ID，例如“art item”

然后您可以简单地将属性分配给该类，因此

<span id="art1" class="art-item">
    <img src="p-imgs/candyCaneCircle.png" >
    <div id="smack1" class="smack-in-middle">
      <img  src="p-imgs/candyCaneCircle.png" style="width:100%;">
      <p style="float:right;">Hello World I love you!</p>  
      <p>Hello Candy Cane I love you!</p>  
      <p>You taste great</p>  
      <p>Why only in December?</p>
    </div>      
</span> 

#art{
  background-color: rgb(142, 169, 186);
}
#art img{
  width: 30%;
  margin: 1%;
}

.smack-in-middle{
  position:fixed;
  left:300px;
  top:100px;
  z-index: 50;
  background-color: white;
  display: none;
}

.art-item:hover .smack-in-the-middle{ display: block; }
.art-item:hover .smack-in-the-middle img{ width:100%; }

你好，世界，我爱你

你好，我爱你

你的味道好极了

为什么只在十二月

#艺术{
背景色：rgb（142169186）；
}
#艺术图像{
宽度：30%；
利润率：1%；
}
.打在中间{
位置：固定；
左：300px；
顶部：100px；
z指数：50；
背景色：白色；
显示：无；
}
.art项：悬停.smack在中间{display:block；}
.艺术项目：悬停.在中间拍打{宽度：100%；}

#艺术{
背景色：rgb（142169186）；
}
.艺术品{
显示：内联块；
宽度：30%；
利润率：1%；
}
.艺术项目img{
宽度：100%；
高度：自动；
}
.打在中间{
位置：固定；
左：300px；
顶部：100px；
z指数：50；
背景色：白色；
不透明度：0；
指针事件：无；
过渡：不透明度。3s缓解；
}
.艺术项目：悬停。在中间拍打{
不透明度：1；
指针事件：全部；
}

express-制作东西
你好，世界，我爱你

你好，我爱你

你的味道好极了

为什么只在12月份？

耶！海盗

和一瓶朗姆酒

土地所有权

赞成使用CSS而不是JS。我将发布一个非常类似的方法。回答很好，我不确定CSS如何理解当我在一个类上悬停时不显示所有具有相同类的项（这发生在我尝试这样做时……但我打赌当时我没有嵌套跨距），谢谢你花时间。我注意到我也可以去掉所有的ID，这是我的目标之一。我的100%宽度风格的作品贯穿始终，我希望以另一种方式解决这个问题。谢谢你，阿加尼没有足够的声誉来给你竖起大拇指，但我试过了。当我拿到15分的时候我会回来的，伙计，你得到你需要的了！坚持下去，这正是我所希望的。。有趣的是，这是如此的可能，甚至与CSS转换。哇，这是超级！你和保罗都做得很快。我真的很感谢我加入的社区。我想补充一点，你向我展示了如何交换宽度以使更改生效，而不必使用id来胜过我用来设置30%img的第一个id。。。这是我需要的。谢谢你挑选了一些我在一些物品上试验的人工制品内联样式。@Tom22当然！很乐意帮忙：）

<span id="art1" class="art-item">
    <img src="p-imgs/candyCaneCircle.png" >
    <div id="smack1" class="smack-in-middle">
      <img  src="p-imgs/candyCaneCircle.png" style="width:100%;">
      <p style="float:right;">Hello World I love you!</p>  
      <p>Hello Candy Cane I love you!</p>  
      <p>You taste great</p>  
      <p>Why only in December?</p>
    </div>      
</span> 

#art{
  background-color: rgb(142, 169, 186);
}
#art img{
  width: 30%;
  margin: 1%;
}

.smack-in-middle{
  position:fixed;
  left:300px;
  top:100px;
  z-index: 50;
  background-color: white;
  display: none;
}

.art-item:hover .smack-in-the-middle{ display: block; }
.art-item:hover .smack-in-the-middle img{ width:100%; }