CSS: hover選擇器的使用(實現滑鼠懸浮效果,滑鼠移上去div顯示)

wujingj發表於2018-05-21

有些時候需要用到mouseover和mouseout這兩個滑鼠事件,但是寫js又比較麻煩,還要新增監聽事件,所以能用css解決的東西儘量用css解決,這樣可以提高效能

用法1:
這個表示的是:當滑鼠懸浮在a這個樣式上的時候,a的背景顏色設定為黃色

a:hover
    { 
        background-color:yellow;
    }

用法2:
使用a 控制其他塊的樣式:

  • 使用a控制a的子元素 b:
    .a:hover .b {
            background-color:blue;
        }
  • 使用a控制a的兄弟元素 c(同級元素):
     .a:hover + .c {
                color:red;
            }
  • 使用a控制a的就近元素d:
    .a:hover ~ .d {
            color:pink;
        }

總結一下:

1. 中間什麼都不加 控制子元素;

2. ‘+’ 控制同級元素(兄弟元素);

3. ‘~’ 控制就近元素;



相關文章