javascript - 更改子元素的样式以在悬停父页面元素 36 次时显示唯一的 div

Question

我有 36 张图片。我目前有一个冗长且重复的方法，使用 72 个 ID 和 72 个 css 行。我认为它可以替换为一个指定子项(或类似)的 jQuery 函数，但我想不出来。

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

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

<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>

重复以上两个 block ，每个 block 有 2 个唯一 ID，再重复 34 次，另外还有两行 css 用于 36 个元素中的每一个。当然我需要 36 个 div 但不需要 72 个 id 和重复的 css。我希望能够调整大小编辑 2 个类/id 而不是 72。

CSS:

#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;
}
art1:hover #smack1{ display: block; }
#art1:hover #smack1 img{width:100%;}
#art2:hover #smack2{ display: block;}
#art2:hover #smack2 img{width:100%;}
#art3:hover #smack3{ display: block;}
#art3:hover #smack3 img{width:100%;}
#art4:hover #smack4{ display: block;}
#art4:hover #smack4 img{width:100%;}
#art5:hover #smack5{ display: block;}
#art5:hover #smack5 img{width:100%;}
/*and so on 31 more times*/

我想在下面找到类似我的尝试的东西

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

我还以某种方式处理了将图片大小调整为 100% 以某种方式覆盖其 id 指定 30% 的棘手问题。

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

Answer 1

给“art1”、“art2”等一个类和一个 ID，例如。 “艺术品”。

然后你可以简单地将属性分配给那个类，所以......

<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%; }