Question

我是HTML和CSS的新手。实际上，这是我学习时建立的第一个站点。为什么:hover不能在我所指向的类上起作用？

我非常感谢您的帮助。但是请说明一下，不要只是告诉我“如何做”。

我试图使search_type选择器仅在将“搜索”按钮悬停后才能显示

先谢谢了。（以下是经过编辑的更简单的代码）

Answer 1

似乎您的css选择器在标记中不匹配： search.button:hover ~ .search.selector 将匹配任何这样的元素： <button class="search button">Search</button> <span class="search selector">Selected</span>

请参阅：https://codepen.io/andreaslangsays/pen/RwwxyEN

Answer 2

例如：https://codepen.io/bjorniobennett/pen/OJJzZrX?editors=1100

:hover的基本行为是，它可以影响自身及其内部元素或相邻的同级元素。因此，我将搜索按钮和select元素包装在它自己的容器中，并将:hover放在容器本身上。通过将:hover放在容器上，您现在可以操纵它的孩子了。

   <div class="search-container">
     <select class="search selector" name="search_type">
       <option value="">Videos</option>
       <option value="search_users">Channels</option>
     </select>
     <input class="search button" type="submit" value="Search" />
   </div>

为什么：hover不能作用于其他对象？

2 个答案: