为什么有悬停这项工作，而不是重点？

当我将鼠标悬停在.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>

来源

2017-10-09 Glitch Fish

重点不是点击..它的输入，当你在他们里面写，检查此：https://www.w3schools.com/cssref/sel_focus.asp –

的：聚焦选择被允许在该接受键盘事件或其它用户输入元件。 –

可以使用无线电或复选框我达到期望的效果？ –

能够赶上:focus，你的元素必须能够通过标签进行集中或点击。表单元素和链接可以接收/捕获焦点事件，其他标记不应该是交互式的。

对于任何其他元素，你需要的属性tabindex把它列入你的文件，在下面的链接了解它的可聚焦元素的列表。

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

的tabindex全局属性指示如果其元件可以被聚焦，并且如果/它在顺序键盘导航参与（通常使用Tab键，因此而得名）。它接受一个整数作为一个值，取决于整数值的不同结果

使用值0，不重新排列可聚焦元素，还介意更新游标值以显示元素可能响应点击事件当盘旋时。

.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; 
 
    cursor:pointer; 
 
} 
 

 
.tdi:focus+.hideDiv { 
 
    display: block; 
 
}

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

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

来源

2017-10-09 18:52:26

，因为它不是可获得焦点。默认情况下，只有表单输入元素和链接是可以聚焦的。但是，如果你把一个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>

来源

2017-10-09 18:54:23 Johannes

为什么有悬停这项工作，而不是重点？

回答

相关问题