爲什麼有懸停這項工作，而不是重點？

當我將鼠標懸停在.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

爲什麼有懸停這項工作，而不是重點？

回答

相關問題