html中CSS:hover选择器改变子元素、同级元素、就近元素的样式
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">定义：</a></li><li><a href="#_label1">基础用法：</a></li><li><a href="#_label2">进阶用法:</a></li><ul class="second_class_ul"><li><a href="#_lab2_2_0">使用a 控制其他块的样式：</a></li><li><a href="#_lab2_2_1">使用a控制a的兄弟元素 c(同级元素)：</a></li><li><a href="#_lab2_2_2">使用a控制a的就近元素d：</a></li><li><a href="#_lab2_2_3">总结一下：</a></li></ul></ul></div><p>鼠标悬浮覆盖元素后，以前使用js的mouseover和mouseout添加监听事件可以实现交互。现在可以使用CSS中的:hover选择器提高性能。:hover选择器可以针对不同的HTML元素，在鼠标悬停时改变元素（也可以是子元素、同级元素、就近元素）的样式，增强网页的互动性和用户体验。</p><p class="maodian"><a name="_label0"></a></p><h2>定义：</h2>
<p>:hover 选择器用于选择鼠标指针浮动在上面的元素。</p>
<p>:hover 选择器适用于所有元素</p>
<p class="maodian"><a name="_label1"></a></p><h2>基础用法：</h2>
<p>这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色</p>
<p>a:hover</p>
<p>{</p>
<p>background-color:yellow;</p>
<p>}</p>
<p>这个是最普通的用法了，只是通过a改变了style</p>
<p class="maodian"><a name="_label2"></a></p><h2>进阶用法:</h2>
<p class="maodian"><a name="_lab2_2_0"></a></p><h3>使用a 控制其他块的样式：</h3>
<p>使用a控制a的子元素 b：</p>
<p>.a:hover .b {</p>
<p>background-color:blue;</p>
<p>}</p>
<p class="maodian"><a name="_lab2_2_1"></a></p><h3>使用a控制a的兄弟元素 c(同级元素)：</h3>
<p>.a:hover + .c {</p>
<p>color:red;</p>
<p>}</p>
<p class="maodian"><a name="_lab2_2_2"></a></p><h3>使用a控制a的就近元素d：</h3>
<p>.a:hover ~ .d {</p>
<p>color:pink;</p>
<p>}</p>
<p class="maodian"><a name="_lab2_2_3"></a></p><h3>总结一下：</h3>
<p>1. 中间什么都不加 控制子元素；</p>
<p>2. ‘+’ 控制同级元素(兄弟元素)；</p>
<p>3. ‘～’ 控制就近元素；</p>
頁:
[1]