鼠标悬浮事件的hover的使用

鼠标悬浮事件hover的使用

用法1

表示当鼠标悬浮在a元素上时,a元素的背景颜色变成粉色

 .a:hover{
        background-color: pink;
    }

用法2

用a来控制其他元素

  • 用a来控制a的子元素
<style>
    .a{
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }
    .b{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
    .a:hover{
        background-color: pink;
    }
    .a:hover .b{
        background-color: aqua;
    }
style>
<body>
    <div class="a">
        <div class="b">

        div>
    div>   
body>
html>
  • 用a来控制其相邻的兄弟元素
<style>
    .a{
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }
    .b{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
    .c{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }
   
    .a:hover +.c{
        background-color: aqua;
    }
style>
<body>
    <div class="a">
        <div class="b">

        div>
    div>
    <div class="c">

    div> 
    
body>
html>
  • 用a来控制其普通兄弟元素
<style>
    .a{
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }
    .b{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
    .c{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }
    .d{
        width: 100px;
        height: 100px;
        border: 1px solid salmon;
    }
     .a:hover ~.d{
        background-color: pink;
    } 
style>
<body>
    <div class="a">
        <div class="b">

        div>
    div>
    <div class="c">

    div> 
    <div class="d">

    div>
body>
html>

总结:

  1. 空格就是控制其子元素
  2. ‘+‘,就是控制其相邻的兄弟元素
  3. ’~‘,就是控制其普通的兄弟元素

你可能感兴趣的:(css,css,css3,html)