Change body background color on link hover

前端 未结 2 1106
情书的邮戳
情书的邮戳 2021-01-14 07:56

How can I change the the page background when the mouse is hovered on a a? I\'m looking for a css only solution.

I know that you can reach the child ele

相关标签:
2条回答
  • 2021-01-14 08:34

    While Mike Ross' demo solves your problem, it doesn't explain how or why it works. It can also be dramatically simplified.

    Basically you want to use the ::before notation on your element. This creates a pseudo-element that is the first child of the associated element, for which you can apply extra styling. You can then style the ::before selector to fill the screen with a particular background colour. For example:

    <a class="special">Test</a>
    
    .special:hover:before{
        content: '';
        position: fixed;
        display: block;
        top: 0; bottom: 0; left: 0; right: 0;
        z-index: -1;
        background-color: #ff0000;
    }
    

    You don't need nth-of-type in there or anything else. See my fiddle here. All you need to do is make sure that the before element is full screen, in the back of the z order and has a particular color.

    0 讨论(0)
  • 2021-01-14 08:38

    Take a look at this DEMO

    Here is html part of it

    <a href="">link 1</a>
    

    And here is the css

    body {
            background: lightblue;
        }
        a:hover:before {
            content: '';
            position: fixed;
            display: block;
            top: 0; bottom: 0; left: 0; right: 0;
            z-index: -1;
            background-color: grey;
        }
    
    0 讨论(0)
提交回复
热议问题