在histed div中添加跨度/ div div

Question

所以我的问题是，我有一堆<a>显示为块，并且他们每个人都有背景图像。有关于该图像的信息（例如价格，描述等）的顶部和底部有跨度的div。

我需要能够悬停在<a>上，并显示新的div（或者如果你有更好的解决方案），它将包含图片，我选择的跨度很少（弹出div内的每个跨度应该是跨度属于<a>），我需要能够用CSS修改该div。

这是我的HTML的一部分：

现在我得到了它到目前为止，它完美地弹出，但你可以想像，我不能内该div少一些编辑和位置的内容添加内容。

a { 
 
    height: 0; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    float: top; 
 
    margin: 10px; 
 
    text-decoration: none; 
 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/9e/Green_eyes_kitten.jpg"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; } 
 

 
    a .desc { 
 
    display: block; 
 
    color: #666666; 
 
    font-size: 12px; 
 
    background-color: #fff; 
 
    margin: 0; 
 
    width: 100%; } 
 

 
    a .price-tag { 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    background-color: #fff; 
 
    color: #666666; 
 
    width: 100%; 
 
    padding: 5px; } 
 

 
    a .price-tag .price { 
 
     float: right; 
 
     background-color: white; } 
 

 
    a .price-tag .desc-sec { 
 
     background-color: white; } 
 

 
a:hover .popup { 
 
    position: absolute; 
 
    left: -1; 
 
    width: 102%; 
 
    height: 110%; 
 
    background-color: rgba(0, 0, 0, 0.9); } 
 

 
.wrapper { 
 
    width: 100%; 
 
    display: block; 
 
    margin: 0; 
 
    background-color: white; } 
 

 

 
    .normal { 
 
     width: calc(20% - 20px); 
 
     padding-bottom: calc(20% - 20px); } 
 

 
     .wrapper .normal:nth-child(1) { 
 
     width: calc(40% - 20px); 
 
     height: 0; 
 
     padding-bottom: calc(40% - 20px); 
 
     position: relative; } 
 

 
     .wrapper .normal:nth-child(1) .price-tag { 
 
      padding: 20px; } 
 

 
     .wrapper .normal .desc { 
 
     padding: 5px; } 
 

 
     .wrapper .normal .price-tag { 
 
     padding: 5px; } }

<div class="wrapper"> 
 
    
 
    <a class="normal fir" href="#"> 
 
    <span class="desc">Lorem</span> 
 
    <div class="price-tag"> 
 
     <span class="desc-sec">Ipsum</span> 
 
     <span class="price">33 000,-</span> 
 
    </div> 
 
    <div class="popup"></div> 
 
    </a> 
 
    
 
    <a class="normal sec" href="#"> 
 
    <span class="desc">Lorem</span> 
 
    <div class="price-tag"> 
 
    \t <span class="desc-sec">Ipsum</span> 
 
    \t <span class="price">45 000,-</span> 
 
    </div> 
 
    <div class="popup"></div> 
 
    </a> 
 
    
 
    <a class="normal th" href="#"> 
 
    <span class="desc">Lorem</span> 
 
    <div class="price-tag"> 
 
     <span class="desc-sec">Ipsum</span> 
 
     <span class="price">25 000,-</span> 
 
    </div><div class="popup"></div> 
 
    </a> 
 
    
 
    <a class="normal four" href="#"> 
 
    <span class="desc">Lorem</span> 
 
    <div class="price-tag"> 
 
     <span class="desc-sec">Ipsum</span> 
 
     <span class="price">55 500,-</span> 
 
    </div> 
 
    <div class="popup"></div> 
 
    </a> 
 
    
 
    <a class="normal fif" href="#"> 
 
    <span class="desc">Lorem</span> 
 
    <div class="price-tag"> 
 
     <span class="desc-sec">Ipsum</span> 
 
     <span class="price">45 500,-</span> 
 
    </div> 
 
    <div class="popup"></div> 
 
    </a> 
 
    
 
    </div>

Answer 1

你不需要JS。只需将其添加到：

a .popup { 
    display: none; 
} 
a:hover .popup { 
    ... 
    display: block; 
} 

您可以在其中放入任何内容。 https://jsfiddle.net/ctg09m6x/2/