html - CSS 悬停在 Chrome 上无法正确更改

Question

好的，所以我正在为某些 Web 应用程序开发某种画廊/选餐器。当我将鼠标悬停在那些田野上时，那些白色的田野上，饭菜应该出现在中间。这很好用，但是当我将鼠标悬停在 Chrome 中的那些白色字段上时，我看不到 :hover 对它们的影响。它仍然有效，但没有效果。在 Firefox 和 IE-11 上运行完美。这是代码链接。 http://codepen.io/anon/pen/yyjKBQ

代码:

.dorucak {
    display: none;
}

.dorucak + label {
    bottom: 0px;
    margin-right: 2px;
    padding: 5px;
    border: 1px solid black;
    width: 10%;
    background: white;
    /*font-size: 24px;*/
    display: inline-block;
}

.dorucak:hover + label {
    color: white;
    background: black;
    cursor: pointer;
}

.dorucak:checked + label {
    color: white;
    background: purple; 
}

Answer 1

.dorucak + label:hover {
	color: white;
	background: black;
	cursor: pointer;
}