html - 无论如何如何悬停整个元素

Question

我有这个结构 HTML：

<span class='something'>
  <a href="" title="description">
    <img src="/assets/no-image.png" alt="description" title="description" />
    <div class="info">
      <div class="title">Title</div>
      <div class="subtitle">subtitle</div>
    </div>
  </a>
</span>

这个CSS：

.something {
  display: block;
  div.info {
    display: none;
  }
  a:hover {
    display: block;
    width: 150px;
    height: 150px;
    background: green;
    img:hover {
      filter: alpha(opacity = 30);
      opacity: .30;         
    }
    div.title, div.subtitle {
      display: block;
    }
    div.info {
      display: block;
      position: relative;
      margin-top: -145px;
    }
  }
}

当我将光标移到<span class="something">元素上时，整个区域将被绿色覆盖。那挺好的。问题是，当我将光标移到DIV内部的元素上时<span class="something">（这意味着在<div class="title">和<div class="subtitle">），绿色背景消失了。

即使光标在这 2 个 DIV 上，我也在努力保持绿色背景。

如何使用 CSS 做到这一点？还是我需要使用 Javascript？

Answer 1

首先，您的 html 在语义上是无效的。内联元素中不能有块元素。

将跨度更改为 div

// CSS

.something {
  display: inline-block;
  padding: 10px;
}
.something:hover {
  background: green;
}
.something:hover .info {
  display: block;
}
.something:hover .title {
  display: block;
}
.something:hover .subtitle {
  display: block;
}
.something .info {
  display: none;
}
.something .title {
  display: none;
}
.something .subtitle {
  display: none;
}
.something img {
  height: 150px;
  width: 150px;
}

标记

<div class="something">
        <a href="#">
            <img src="../styles/images/Desert.jpg" />
        </a>

        <div class="info">
            <div class="title">Title</div>
            <div class="subtitle">Subtitle</div>
        </div>
    </div>