猿问

一直搞不懂hover 为什么有时候放在前面 ,有时候放在后面

有时候又要加空格 不加空格就没效果,我一直都是这样用的例如a:hover{} 

576a9c15000107c905000119.jpg

576a9c160001568e05000120.jpg

http://img.mukewang.com/576a9b350001cd7301480107.jpg这又是什么意思 还非要加个空格 , 要不然没效果

这是一个鼠标划过box1反转背面box2的效果,谁能告诉我呀 ,谢谢

慕斯卡5910870
浏览 4584回答 11
11回答

ChinaCJM

.wrap:hover表示的是当鼠标移动到wrap上面的时候wrap的样式变化。.wrap:hover .box表示的是当鼠标移动到wrap上面的时候box的样式变化

weibo_哆啦A梦有大口袋_0

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .wrap{width: 100px;margin: 0 auto;} .box1{width: 100%;height: 100px;background: #ccc;} .box2{width: 100%;height: 100px;background: #666;} /*当移入父元素wrap的时候,它下面的子元素box1,box2背景颜色改变,这里的空格表示后面的元素为子元素*/ .wrap:hover .box1{background: #666;} .wrap:hover .box2{background: #ccc;} </style> </head> <body> <div class="wrap">     <div class="box1"></div>     <div class="box2"></div> </div> </body> </html>

ybc4652

后面不加.box1的话是他本身的hover效果  加上的话是.box1的样式改变

leon66

不加空格  才奇怪呢  ;  加了空格后 就很明白   当wrap 当 hover 后,子元素 box 产生如下效果{ 。。。。}PS;看你第一行代码时一惊,这是神马东西,吓的我感觉百度了好几下呢。。。

qq_Material_0

hover前面有空格和没有空格有不一样的效果,:hover前面没有空格,影响的只是该元素的兄弟节点;但是,如果前面有了一个空格,那效果就大大不一样了,有个空格影响的就是 该元素下面的子节点了。

echo_kinchao

那是要根据你要控制的范围来确定的

老猿

这个空格代表box是wrap里面的子元素

没看完

我觉得这样写你会更好理解一点吧   .wrap  .box1:hover  不知道你的html是怎么写的

Walk_

这个空格是表示,后面是前面的子节点。PS;看你第一行代码时一惊,这是神马东西,吓的我赶紧百度了一下。。。
随时随地看视频慕课网APP
我要回答