无论如何如何悬停整个元素答案

【问题标题】：how to hover the whole element no matter what无论如何如何悬停整个元素
【发布时间】：2013-10-13 09:31:45
【问题描述】：

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

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

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

【问题讨论】：

<a> 不能有 <div> 作为孩子。
@j08691 在 HTML5 中是：html5doctor.com/block-level-links-in-html-5
是的，但这并不能解决div 在span 内的问题，它仍然无效。
我将您的 LESS 转换为 CSS 并对其进行了一些修改，以便能够在不离开 div 的情况下从 .something 移动到 .info，它按预期工作：jsfiddle.net/K4ZeD
@Aljullu - 嗯，不是根据 W3 的验证器。

标签： html css background hover

【解决方案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>

【讨论】：

我没注意到。无论如何， a 中的 div 将不起作用。块元素溢出。还有一种叫做语义的东西。 span 旨在仅包含内联元素。这就是为什么有两个匿名元素 span 和 div。 HTML 规范清楚地对它们进行了分类。