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">）时，绿色背景会消失。

即使光标位于这两个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>

无论怎样，如何悬停整个元素

1 个答案: