同时悬停在多个元素上？

Question

我试图为整个块应用hover（同一个块必须指向一个链接），但不能实现这一点。

http://codepen.io/anon/pen/GogjQK

我试图在整个框架类中包含<a>标记并单独编辑悬停状态，但没有任何反应。

这就是我试图让它在悬停时显示的方式，以及单击链接并激活时

希望有人可以帮我解决这个问题。先感谢您。

Answer 1

您可以在frame div上使用子选择器来影响其中的子项。

例如，我添加了以下代码，以便在主框架悬停时为h3标记着色。

.frame:hover > div > h3 {
  color: #00bb00;
}

如果您稍微修改HTML

<div class="frame">
  <img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png" class="thumbnail" />
  <img src="http://placehold.it/60x60" class="thumbnail" id="hidden" />
  <div class="info">
    <h3>H3</h3>
    <p>pppppp</p>
  </div>
</div>

您也可以使用以下CSS来更改图像：

.frame:hover > .thumbnail {
  display:none;
}

.frame:hover > #hidden {
  display:inline;
}

#hidden {
  display:none;
}

以下是codepen的例子。

Answer 2

尝试在创建包含块的div后添加超级引用，如下所示：

<div class="frame"> <a href="http://stackoverflow.com">
  <img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png"
class="thumbnail" />
  <div class="info">
    <h3>H3</h3>
    <p>pppppp</p>
  </div>
  </a>
</div>

然后在CSS中，将整个块称为链接，如下所示：

.frame a {
  float: left;
  width: 300px;
  min-height: 60px;
  background-color: ##00F;
  margin: 0px 10px;
  border: 1px solid black
}

.frame a:hover > .info > h3 {
  color: green;
}

示例： codepen