Question

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

重复上面两个块，每个块有2个唯一ID，每次34次，另外36个项目中每个都有两行css。当然我需要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％的粘性问题，以某种方式覆盖了他们指定的30％的ID。

我对jQuery的尝试隐藏了缩略图（我不想要）并且不显示隐藏的div。我也尝试过next（）等，没有找到合适的语法。

Answer 1

给予＆＃34; art1＆＃34;，＆＃34; art2＆＃34;一个类以及一个ID，例如。＆＃34;艺术项目＆＃34;

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

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

Answer 2

＆＃13;

#art {
    background-color: rgb(142, 169, 186);
}
.art-item {
    display: inline-block;
    width: 30%;
    margin: 1%;
}
.art-item img {
    width: 100%;
    height: auto;
}

.smack-in-middle {
    position:fixed;
    left:300px;
    top:100px;
    z-index: 50;
    background-color: white;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.art-item:hover .smack-in-middle {
    opacity: 1;
    pointer-events: all;
}

＆＃13;

<div id="art"> <span class="subject-title">express - make stuff</span>
 <span class="art-item">
     <img src="http://placehold.it/100x100">
       <div class="smack-in-middle">
        <img src="http://placehold.it/100x100">
        <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 class="art-item"> 
     <img src="http://placehold.it/100x100">
      <div class="smack-in-middle">
          <img src="http://placehold.it/100x100">
          <p>Yarr! Piracy!</p> 
          <p>and a bottle of rum</p> 
          <p>Land Ahoy</p> 
      </div> 
  </span>

</div>

＆＃13;

我在每个父span标记中添加了一个art-item类，其ID为art-X。另外，将width: 30%和margin: 1%应用于这些元素而不是图像。

而不是在悬停时在display: none和display: block之间切换，而是在opacity: 0到opacity: 1之间切换 - 这将允许您创建一些不错的过渡和缓和。 / p>

通过切换不透明度，您需要修改pointer-events属性，以确保没有人能够选择.smack-in-middle的任何子元素

改变子元素的样式元素，在父页元素36的出现时显示独特的div

2 个答案: