Switch the background color of the body when hovering over a link

Is it possible to change the page background when hovering over a a using only CSS? I am searching for a solution that does not involve any JavaScript.

I understand that we can access child elements with CSS, but I am unsure if it is possible to target the body element in this scenario. Any suggestions?

Answer №1

Check out this DEMO

Take a look at the html snippet below:

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

And here is the css portion:

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;
    }

Answer №2

Mike Ross' demonstration provides a solution to your issue, but it lacks an explanation of how or why it works and could be more straightforward.

The key is to utilize the ::before notation on your element. This creates a pseudo-element that acts as the first child of the associated element, allowing you to apply additional styling. By styling the ::before selector to cover the entire screen with a specific background color:

<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 can omit nth-of-type and other unnecessary elements. Refer to my fiddle here. Just ensure that the before element covers the full screen, is positioned behind other elements, and has the desired color.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Select element from Material UI displaying horizontally

I'm brand new to Material Ui and currently tackling the implementation of their SELECT component. However, I am running into an issue where it is displaying in a row instead of a column. Am I overlooking something important here? const SelectDropDownC ...

How to Create a DataTable Responsive Feature Where All Columns Collapse on Click, Except the Last One?

I am currently utilizing the DataTables library to generate a responsive table. I am aiming to create a feature where all columns in the DataTable can toggle between collapse and expand states when clicked, with the exception of the last column. Below is a ...

Html5 canvas not resizing to fit container

I'm currently working on creating a square canvas using CSS to ensure it is instantly sized when the page loads. To achieve this, I am wrapping the canvas in a div and applying the following styles: http://jsfiddle.net/evopgwzd/ body { backgrou ...

A method to ensure that inline <div> elements occupy the entire available width

The typical solution for this issue is using float, however, it does not work in my situation. I attempted to utilize flexbox and overflow:hidden for the parent element, but unfortunately, it did not resolve the issue. Currently, I am dealing with three i ...

What is the best way to extract the chosen value from a dropdown menu within the $_POST array?

In my HTML code, I have a droplist using the <select> tag. How can I retrieve the selected value from the $_POST array once the user submits the form? <form action="subj_exec.php"> <?php echo $_SESSION['SESS_MEMBER ...

What is the best way to position an element at the bottom of a div?

In the div, there are elements like h1, p, and a. The goal is to have the h1 at the top, the a at the bottom, and the p in the middle regardless of its height. Check out the jsfiddle for a live demo. Here is the source code: HTML <div class="box"> ...

Transferring information between pages in PHP

Currently, I am exploring the most effective way to pass data between two pages (Page A to Page B) using PHP for a specific scenario: Page A: This page displays a gallery of images with titles. The PHP file makes a database call to an images table, which ...

My line occupies an excessive amount of vertical space

Working on a practice website and realizing my CSS skills are a bit rusty. Struggling with the height of a row in my container, as it's taking up too much space. Also, having trouble positioning the second row below the first one without it ending up ...

The Geolocation API popup on Safari for iOS kept appearing repeatedly

I have successfully implemented a code using the HTML5 Geolocation API to retrieve the user's current position within a mobile website. Although the code functions properly, there is an issue with Safari on iOS. Whenever the page is reloaded, a syste ...

Creating a dynamic multi-item carousel with Materialize (CSS) cards using data from a loop - here's how!

Using a for loop, the following code generates a list of cards. These cards are intended to be displayed in a carousel with 4 cards visible at once, and a next arrow button allows users to navigate through the next set of 4 cards. Materialize cards have ...

Sending Image Data in Base64 Format with Ajax - Dealing with Truncated Data

My current challenge involves sending Base64 image data through ajax to the Server. I've noticed that sometimes all the pictures are successfully sent, but other times only a few make it through. Does anyone have suggestions on how to implement error ...

Pressing the reset button on a basic calculator

I am experiencing an issue with my calculator. It works fine initially, but after using the reset button, it stops functioning properly. Currently, I only have the multiplication set up as I debug this problem. I am new to JavaScript and would appreciate a ...

Customizing Image Layout with jQuery Masonry - Tips for Aligning Images

I've successfully created a jQuery masonry layout that showcases recent posts from various categories on the homepage. However, I'm facing two challenges and seeking help to address them: How do I remove the small white gaps beneath some ima ...

"Customize your map pins on Google Maps by updating the marker location through a

I am trying to update the position of a map marker based on a dropdown selection. Upon changing the dropdown option, I retrieve the latitude and longitude values and want to set these coordinates for my current marker. Here is the code snippet: $("#locati ...

Playing only audio and no video in an Android WebView using HTML5

I am currently facing a challenge with a webpage that includes an html5 video and css3 animations. While the web page functions perfectly on an android device's browser, I am experiencing laggy, glitchy, and jumpy animations when using hardware accele ...

How can I achieve rounded corners in Internet Explorer using JQuery?

I've tried using various plugins like curvycorners, DD_roundies, and behavior: url(ie-css3.htc);, but none of them seem to work properly. Can anyone suggest alternative methods for achieving rounded corners in IE? My website is designed to be resizabl ...

Trouble with arranging nested bootstrap grid cells

Having a bit of trouble with the bootstrap framework. I am trying to set up a simple box with an image on the left side and some text and other elements on the right side. However, I am encountering issues when it is viewed on smaller screens. Here is ...

Issues with AngularJS UI Router functionality are being experienced specifically on localhost

What is causing the discrepancy in UI-Router functionality between JSFiddle and localhost? The localhost link is http://127.0.0.1:54046/preview/app/index.html. Have I overlooked something crucial here? There are no visible JS errors present in the console. ...

Update the chosen option of the <select> element that was generated through PHP if there is a parameter value present in the URL

I'm currently working on a code snippet like this: <select name="id" id="id"> <OPTION VALUE="null">Select<OPTION> <? foreach ($genres as $row){ ?> <OPTION VALUE="<? echo $row->id; ?>"><? echo ...

Using PHP with a form that allows multiple selections: in the case that the first task option is chosen, utilize the following code

HTML: <select name="taskOption[]" multiple> <option>first<br /></option> <option>second<br /></option> <option>third</ option> </select> PHP: <?php foreach ($_GET['taskOptio ...