时间戳

首页 > 解决方案 > 为什么 :hover 不能影响其他对象？

html - 为什么 :hover 不能影响其他对象？

问题描述

我是 HTML 和 CSS 的新手。事实上，这是我在学习中建立的第一个网站。为什么:hover效果对我指向的类不起作用？

我会非常感谢每一个帮助。但请解释一下，不要只告诉我“如何”。

我试图让 search_type 选择器只有在悬停“搜索”按钮后才可见

提前致谢。（这是编辑为更简单的代码）

https://codepen.io/_Hiderr/pen/WNNdJdo

标签： htmlcss

解决方案

像这样：https ://codepen.io/bjorniobennett/pen/OJJzZrX?editors=1100

的基本行为:hover是它可以影响自身和其中的元素，或者下一个相邻的兄弟。所以我将搜索按钮和选择元素包装在它自己的容器中，并将其放在: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>

推荐阅读