hover是一个伪类选择器,最近发现一个问题,就是关于.con:hover li 和.con li:hover的比较,先来描述一下这两个的意思:
.con:hover li 表示的是当鼠标移动到.con中时的li样式变化
.con li:hover 表示的是当鼠标移动到.con中的li上面的时候li的样式变化
测试代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .con{ border:2px solid red; } ul{ list-style:none; } li{ width:50px; height:50px; margin:10px 0; line-height:50px; text-align:center; background-color:gold; transition:all 2s ease; } /*关于hover在前或者在后的比较*/ /*.box .front:hover表示的是当鼠标移动到box中的front上时的front样式变化。 .box:hover .front 表示的是当鼠标移动到box上面的时候front的样式变化*/ /*鼠标停留在红色框内任何区域都hover,1-5全部同时hover*/ .con:hover li{ background-color:red; width:500px; } /*鼠标只有停留在黄色区域在进行hover,而且鼠标移动到哪个哪个进行hover*/ .con li:hover{ /* background-color:red; width:500px; }*/ </style> </head> <body> <ul class="con"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
效果图如下,解释:
.con li:hover 鼠标只有停留在黄色区域在进行hover,而且鼠标移动到哪个哪个进行hover
.con:hover li 鼠标停留在红色框内任何区域都hover,1-5全部同时hover