在悬停 div 中添加 spans/divs

Question

所以我的问题是我有一堆 <a> 显示为块，并且每个都有背景图像。在 <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">
     <span class="desc-sec">Ipsum</span>
     <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/

在悬停 div 中添加 spans/divs

Adding spans/divs in hovered div

css

popup

hover