Switching the background color of the page when hovering over it

         <div class="projects-list home-1">
                <article class="whispers">
                    <h1>Whispers</h1>
                    <figure>
                        <a href="/projects/whispers.html">
                           <img src="assets/media/images/whispers.jpg"alt=""
                        </a>
                    </figure>
                </article>
                <article>
                    <h1>Victoria</h1>
                    <figure>
                        <a href="projects/after-august.html">
                           <img src="assets/media/images/victoria.jpg"alt=""
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>for sasha</h1>
                    <figure>
                        <a href="projects/for-sasha.html">
                            <img src="assets/media/images/fosasha.jpg"alt=""
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>old and blue</h1>
                    <figure>
                        <a href="projects/old-and-blue.html">
                         <imgsrc="assets/media/images/oldandblue.jpg"alt="">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>offf barcelona</h1>
                    <figure>
                        <a href="projects/offf-barcelona.html">
                            <img src="/assets/media/images/offf-barcelona.jpg" alt="">
                        </a>
                    </figure>
                </article>

         </div>

I am interested in changing the background color of the body tag when hovering over certain images. Is there a way to select another element on CSS on hover?

For example: 

article:hover { here i want to say like body: background = 'whatever' }

Instead of using JS, I am looking for an easier way to achieve this through CSS.

javascripthtmlcss

Answer №1

It's unfortunate that CSS doesn't have a parent/ancestor selector. In order to style the body or an ancestor element, you'll need to use a JS solution.

The good news is that you can achieve this without relying on jQuery.

const elements = document.querySelectorAll('article');

elements.forEach(elem => {
  elem.addEventListener("mouseenter", function(event) {
    const bg = document.querySelector('.projects-list')

    const color = event.target.getAttribute("data-color");

    bg.style.backgroundColor = color;
  }, false)
})
.projects-list {
  padding: 20px;
}

img {
  width: 100%;
}
<div class="projects-list home-1">
  <article data-color="orange" class="whispers">
    <h1>Whispers</h1>
    <figure>
      <a href="">
        <img src="https://placeimg.com/640/480/any" alt="" </a>
    </figure>
  </article>

  <article data-color="purple">
    <h1>Victoria</h1>
    <figure>
      <a href="#">
        <img src="https://placeimg.com/640/480/any" alt="" </a>
    </figure>
  </article>

  <article data-color="blue">
    <h1>for sasha</h1>
    <figure>
      <a href="#">
        <img src="https://placeimg.com/640/480/any" alt="" </a>
    </figure>
  </article>

  <article data-color="red">
    <h1>old and blue</h1>
    <figure>
      <a href="#">
        <img src="https://placeimg.com/640/480/any" alt="">
      </a>
    </figure>
  </article>

  <article data-color="green">
    <h1>offf barcelona</h1>
    <figure>
      <a href="#">
        <img src="https://placeimg.com/640/480/any" alt="">
      </a>
    </figure>
  </article>

</div>

Answer №2

$(document).ready(function(){
$('img').mouseover(function(){
  $('body').css('background-color',$(this).data('color'));
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="projects-list home-1">
                <article class="whispers">
                    <h1>Whispers</h1>
                    <figure>
                        <a href="/projects/whispers.html">
                           <img class="img" src="https://picsum.photos/200/200?random"alt="" data-color="pink">
                        </a>
                    </figure>
                </article>
                <article>
                    <h1>Victoria</h1>
                    <figure>
                        <a href="projects/after-august.html">
                           <img src="https://picsum.photos/200/200?random"alt="" data-color="grey">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>for sasha</h1>
                    <figure>
                        <a href="projects/for-sasha.html">
                            <img src="https://picsum.photos/200/200?random"alt="" data-color="red">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>old and blue</h1>
                    <figure>
                        <a href="projects/old-and-blue.html">
                         <img src="https://picsum.photos/200/200?random"alt="" data-color="green">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>offf barcelona</h1>
                    <figure>
                        <a href="projects/offf-barcelona.html">
                            <img src="https://picsum.photos/200/200?random" alt="" data-color="blue">
                        </a>
                    </figure>
                </article>

         </div>
         </body>

Utilize JavaScript to accomplish this task. Hopefully, this solution will be beneficial for you.

Answer №3

Below is a bunch of code that has been modified. I want to apologize in advance for any changes made.

<!DOCTYPE html>
<html>
<head>
<style>
body   {  background:#e5e5e5;}
.projects-list-home-1{
text-align:center;
}

.whispers{
text-decoration:none;
}


</style>
<script>
function bgChange(bg) {
    document.body.style.background = bg;
}
</script>
</head>
<body>
<div class="projects-list-home-1">
                <article>
                    <h1>Whispers</h1>
                    <figure>
                        <a href="/projects/whispers.html"  onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')" style="background-color:Khaki" class="whispers">
                           <img src="assets/media/images/whispers.jpg"alt=""
                        </a>
                    </figure>
                </article>
                <article>
                    <h1>Victoria</h1>
                    <figure>
                        <a href="projects/after-august.html" onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')" style="background-color:Palegreen" class="whispers">
                           <img src="assets/media/images/victoria.jpg"alt=""
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>for sasha</h1>
                    <figure>
                        <a href="projects/for-sasha.html" onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')" style="background-color:Orange" class="whispers">
                            <img src="assets/media/images/fosasha.jpg"alt=""
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>old and blue</h1>
                    <figure>
                        <a href="projects/old-and-blue.html">
                         <imgsrc="assets/media/images/oldandblue.jpg"alt="">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>offf barcelona</h1>
                    <figure>
                        <a href="projects/offf-barcelona.html">
                            <img src="/assets/media/images/offf-barcelona.jpg" alt="">
                        </a>
                    </figure>
                </article>

         </div>
</body>


</html>

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

The active link for pagination in CodeIgniter is malfunctioning

Even though there might be similar posts on StackOverflow, my situation is unique. Hence, I have decided to ask this question with a specific title. Let me break down my issue into smaller parts: Part - 1: I have a regular view page where I can select a ...

javascriptphpajaxcodeigniter

How can you effectively blend Vue/Angular with other JavaScript resources to enhance your development process?

My curiosity lies in understanding how front-end javascript libraries such as Vue and Angular can seamlessly integrate with other libraries and assets. For instance, if I were to procure a website template already equipped with additional javascript, is it ...

javascriptangularvue.js

On the hunt for a Laravel 8 application using Jetstream and Inertia within the DOM!

Hey there, I'm currently in the process of transitioning our Vuetify app to Laravel 8, Jetstream, and the inertia stack. While going through ./resources/js/app.js, I came across this line: const app = document.getElementById('app'); This c ...

javascriptlaravel-8inertiajslaravel-jetstream

Building interactive forms in Angular 6

I want to design a dynamic form that creates a new form when the AddNew button is clicked. In my TypeScript (ts) file, I have the following code: addinfoForm: FormGroup; infoNameList: FormArray; infoModel: Productdetail; constructor(private fb ...

javascriptangulartypescriptangular6

What causes this loop to operate in one location but not in another?

import { log, logTitle } from "logger"; var persons = [ {name: "Alex", age:22}, {name: "Maria", age:30} ] var number = 0; for (var i = 0; i <= persons.length; i++) { log(persons[i].name); log(persons[i].age); l ...

javascript

Styling for the DataTable disappears upon loading jQuery

my PHP file named "zero3data.php" <?php printf('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">'); printf('<thead>'); printf('<tr>'); ...

javascriptcss

ajax is unable to decode a JSON string from a GET request

Currently, I am leveraging angularjs to retrieve userId, userTitle, and userComment from a form. These values are then sent to a PHP page from the controller for communication with a server. Everything works well when sending integers, but I face an issue ...

javascriptphpangularjsajax

The pictures in a <div> tag are not showing up

Functionality: I have set up 2 different <div> elements with unique IDs. Each of these <div> elements will make an ajax call to fetch a specific set of images for display. To summarize, both <div> elements are invoking the same ajax met ...

javascriptjqueryhtmlcssajax

Manipulating links using JQuery: avoiding the binding of new links

I need to update a website with 50 pages that currently doesn't use ajax, making it cumbersome to make edits since changes have to be made on all 50 pages individually. After removing duplicate HTML from all 50 pages, I'm facing some issues: fu ...

javascriptjqueryhtml

Is there an alternative to the jQuery :contains selector?

How can I choose an option from a drop-down menu based on its text value? When I execute the following code: var desiredText = "Large"; $("#size option:contains(" + desiredText + ")").attr('selected', 'selected'); it ends up selecting ...

javascriptjquerydrop-down-menu

What are the different applications of npm packages?

Is it possible to use npm packages in any Javascript runtime environment? I have experience using them in Angular and Node, but are they universally compatible across all environments? Edit: To those who downvoted this post, as a newcomer seeking assistan ...

javascriptnode.jsnpm

Encountering a "403 Forbidden" error upon deployment to the server due to

Situation: I am developing a website using Spring web MVC, JSP, and HTML/JavaScript. One of the features I have implemented is a search function that communicates with imdbapi.org to retrieve movie/TV show information in JSON format via AJAX. The JSON resp ...

javajavascripthtmlspring-mvctomcat7

Animating the fill of an SVG path

I am trying to fill a path that resembles a circle with color using animation. The color fill animation should follow a circular pattern, rather than filling from top to bottom or bottom to top. Here is my SVG code: <svg id="svg_circle" width="100%" ...

htmlcsssvgsvg-animate

The CSS outline properties vary between input elements and input elements in focus

I'm encountering an issue with a box and its associated CSS outline style. When the box is focused, it should display a blue outline (which is working fine). However, upon form validation, if there is an error, the .error class is added which should c ...

csshtml

Creating a PDF document using html2pdf: A step-by-step guide

Currently, I am immersed in a project using React. The main goal right now is to dynamically generate a PDF file (invoice) and then securely upload it to Google Drive. In the snippet of code provided below, you can see how I attempted to create the PDF f ...

javascripthtmlreactjsjspdfhtml2pdf

Discovering the process of retrieving information from Firebase using getServerSideProps in NextJs

I've been exploring ways to retrieve data from Firebase within GetServerSideProps in NextJs Below is my db file setup: import admin from "firebase-admin"; import serviceAccount from "./serviceAccountKey.json"; if (!admin.apps.len ...

javascriptfirebasenext.jsfirebase-admin

Ordering styles in Material UI

I've spent countless hours customizing this element to perfection, but the more I work on it, the more of a headache it gives me. The element in question is an outlined TextField, and my focus has been on styling its label and border. Initially, I th ...

javascripthtmlcssreactjsmaterial-ui

Unable to cut a line shape in Three.js using THREE.ExtrudeGeometry for punching

Hey everyone, I'm brand new to Three.js I'm looking to cut out some shapes from a flat board using THREE.ExtrudeGeometry. Check out the code snippet below: // Code snippet here... In my example, I've included a circular shape and t ...

javascriptthree.js3dgeometrydrawing

Tips for optimizing VueJS development performance in terms of RAM usage

I've been diving into a Vue.js project that has quite a large codebase written on Vue 2. However, I've noticed that when running it in development mode with vue-cli-service serve, it hogs over 2GB of RAM. I've experimented with several confi ...

javascriptnode.jsvue.jsoptimizationvuejs2

Updating an individual item from an array of objects using ReactJS

I am facing an issue with my database's Opening Time table. Whenever I try to modify the opening time of one day, the opening time of other days gets deleted as well. Below is the code snippet I'm using to update my state data: async handleCha ...

javascriptarraysreactjs