Question

当我将鼠标悬停在.tdi div上时，它会显示图片，但是当我放置时它为什么不起作用：专注于它，我想让它在我点击.tdi时保持图片显示。

.div1 {
  float: left;
}

.hideDiv {
  display: none;
  background-image: url("http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg");
  background-repeat: no-repeat;
  width: 400px;
  height: 500px;
  background-size: cover;
}

.tdi {
  border-style: solid;
  border-color: red;
  width: 50px;
  height: 50px;
}

.tdi:hover+.hideDiv {
  display: block;
}

<div class="tdi">

</div>
<div class="hideDiv">
</div>

Answer 1

为了能够捕获:focus，您的元素必须能够通过制表符或点击进行聚焦。表单元素和链接可以接收/捕获焦点事件，其他标签不应该是交互式的。

对于任何其他元素，您需要属性tabindex将其包含在文档的可聚焦元素列表中，请在下面的链接中阅读。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

tabindex 全局属性指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此名称）。它接受一个整数作为值，取决于整数值
，结果不同

使用值0，不对可聚焦元素重新排序，还要记住更新光标值以显示元素在悬停时可能响应click事件。

＆＃13;

.div1 {
  float: left;
}

.hideDiv {
  display: none;
  background-image: url("http://placekitten.com/400/500");
  background-repeat: no-repeat;
  width: 400px;
  height: 500px;
  background-size: cover;
}

.tdi {
  border-style: solid;
  border-color: red;
  width: 50px;
  height: 50px;
  cursor:pointer;
}

.tdi:focus+.hideDiv {
  display: block;
}

＆＃13;

<div class="tdi" tabindex="0">

</div>
<div class="hideDiv">
</div>

＆＃13;

Answer 2

因为它无法集中精力。默认情况下，只有表单输入元素和链接是可聚焦的。但是如果你将tabindex属性放入标签中，它就变得可以集中，你可以这样做：

.div1 {
  float: left;
}

.hideDiv {
  display: none;
  background-image: url("http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg");
  background-repeat: no-repeat;
  width: 400px;
  height: 500px;
  background-size: cover;
}

.tdi {
  border-style: solid;
  border-color: red;
  width: 50px;
  height: 50px;
}

.tdi:focus+.hideDiv {
  display: block;
}

<div class="tdi" tabindex="0">

</div>
<div class="hideDiv">
</div>

为什么这与悬停而不是焦点一起工作？

2 个答案: