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 在语义上是无效的。内联元素中不能有 block 元素。

将跨度更改为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>