"When the DIV is hovered over, 3 items are displayed, 3 items are concealed, and there is one

Within my design, I have three main boxes identified as #box1, #box2, and #box3. The goal is to reveal the hidden information text, labeled .info1, .info2, and .info3 respectively, when hovering over each box. Simultaneously, the opacity of the other boxes should reduce to 0.2 and the ".headline" should be hidden.

I'm exploring ways to achieve this effect without the use of Javascript, relying solely on CSS.

After researching various resources, I'm struggling to understand why the following approach is not producing the desired outcome: http://jsfiddle.net/q6jpjz65/1/


        .headline {
            display: block;
        }
        .info1 {
            display: none;
        }
        .info2 {
            display: none;
        }
        .info3 {
            display: none;
        }

        #box1, #box2, #box3 { 
            background-color: rgba(0,0,0,1.0);
            width: 1.92708%; 
            height: 3.7871%;
            position: absolute;
            border: 1px solid white;
            outline: 1px solid black;
            opacity: 1;
        }

        #box1:hover #box2 #box3 {
            opacity: 0.2; 
        }
        #box1:hover + .info1 {
            display: block;
            opacity: 1; 
        }
        #box1:hover + .headline {
            display: none;
            opacity: 1; 
        }

        #box2:hover #box1 #box3 {
            opacity: 0.2; 
        }
        #box2:hover + .info2 {
            display: block;
            opacity: 1; 
        }
        #box2:hover + .headline {
            display: none;
            opacity: 1; 
        }

        #box3:hover #box1 #box2 {
            opacity: 0.2; 
        }
        #box3:hover + .info3 {
            display: block;
            opacity: 1; 
        }
        #box3:hover + .headline {
            display: none;
            opacity: 1; 
        }
        
        <div class="headline">
            This text is always displayed when nothing is hovered.
        </div>
        <div id="box1" style="top: 10%">
            <div class="info1">
                Information for box1.
            </div>
        </div>
        <div id="box2" style="top: 30%">
            <div class="info2">
                Information for box2.
            </div>
        </div>
        <div id="box3" style="top: 50%">
            <div class="info3">
                Information for box3.
            </div>
        </div>
    

Answer №1

If you're looking to add some style to your HTML elements, consider wrapping everything in a wrap div and applying styles accordingly: Check out this JS Fiddle for an example

Here's the HTML structure:

<div class="wrap">
  <div class="headline">This text is always displayed when nothing is hovered.    
  </div>
  <div id="box1" style="top: 10%">
    <div class="info1">Information for box1.</div>
  </div>
  <div id="box2" style="top: 30%">
    <div class="info2">Information for box2.</div>
  </div>
  <div id="box3" style="top: 50%">
    <div class="info3">Information for box3.</div>
  </div>
</div>

And here are the CSS styles:

.wrap:hover #box2, .wrap:hover #box3, .wrap:hover #box1{
  opacity: 0.2;
}
.wrap:hover .headline {display: none;}
#box1:hover, #box2:hover, #box3:hover {opacity: 1 !important;}

One thing to note is that without using JavaScript, hiding the Headline when hovering over the elements might be tricky because of how the elements are structured. It's recommended to consider incorporating some JavaScript for better control.

Consider exploring JavaScript for more functionality.

Answer №2

To display the child elements, simply eliminate the + in the CSS, changing from #box1:hover + .info1 to #box1:hover .info1:

#box1:hover .info1 { ... }

#box2:hover .info2 { ... }

#box3:hover .info3 { ... }

Check out an example on Fiddle

However, to adjust the opacity of other boxes to 0.2 and hide .headline, JavaScript is necessary. Here's how it can be done for #box1:

document.getElementById("box1").onmouseover = function() {
    document.getElementsByClassName("headline")[0].style.display = "none";
    for(var i=1; i<4; i++) {
        if(i != 1) document.getElementById("box"+i).style.opacity = "0.2";
    }
}

Alternatively, you could simplify the process by handling the styling of other boxes in CSS, as suggested by @dwreck08. In this case, the JavaScript code for all boxes would be:

for(var j=1; j<4; j++) {
    document.getElementById("box"+j).onmouseover = function() {
        document.getElementsByClassName("headline")[0].style.display = "none";
    }
}

If you want the headline to appear again onmouseout, you can do the following:

for(var j=1; j<4; j++) {
    document.getElementById("box"+j).onmouseover = function() {
        document.getElementsByClassName("headline")[0].style.display = "none";
    }
    document.getElementById("box"+j).onmouseout = function() {
        document.getElementsByClassName("headline")[0].style.display = "block";
    }    
}

Keep in mind that using JS libraries like jQuery can greatly simplify this process

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 Hover Effect on HTML Element Not Working on One Side Specifically

Scenario: Currently, I am working on creating a popover (tooltip) using Bootstrap 3.3.7. In order to achieve this, I have structured my HTML file as follows: popover { margin-left: 100%; padding: 5px 11px; border: solid 1px; border-radius: 25px ...

CORS issue encountered by specific user visiting the hosted website

I recently developed a bot chatting website using Django and React, which I have hosted on HOSTINGER. The backend is being hosted using VPS. However, some users are able to see the full website while others encounter CORS errors where the APIs are not func ...

Personalized VueJS Counter

Just started learning VueJS and I've encountered a challenge while attempting to build a custom counter. Here is the code snippet: <template v-for="(ben, i) in plan.beneficios"> <div class="w-80 w-90-480 m-auto pa-hor-5-480" :class= ...

How do I alter the post title font size with a child theme?

After updating my theme, I noticed that the H1 for my Posts titles in the "Next Posts" section changed to H4 unexpectedly. How can I revert it back to how it was before? I've attempted fixing it without success. If you need a visual reference, you ca ...

Arrange image, icon, and title in Bootstrap navigation bar

index.html <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> </ul> <span class="navbar-text" s> <ul class="navbar-nav mr-auto ...

Positioning two elements next to each other and keeping them aligned evenly

CSS - How to Float Two Elements Side by Side I am facing a similar challenge in achieving the layout I want. With a percentage-based layout, either my menu overlaps with the content or the content gets pushed below the menu when viewed on mobile devices. ...

Tips for creating Card-Title responsiveness across various screen dimensions with Bootstrap 4

I'm a beginner in web design and I'm wondering if it's possible to adjust the font-size of the card-title and the size of the card image based on different screen sizes using bootstrap 4. When viewed on small screens, they appear too large. ...

"Creating a Two-Column Layout with ASP.NET Core and Bootstrap through POST

I have been working on a simple form for testing and learning purposes. Initially, I used Scaffold New Razor Page in VS to create the form. Afterward, I attempted to modify it in order to have two columns on the create page. Despite trying various methods ...

Navigating to a new webpage element within a div class using Selenium

Struggling with selecting an element on a webpage using Selenium? Despite my experience with this website and methods like css selector and XPath, I can't seem to pinpoint the element in a troublesome section. The challenge arises when I attempt to in ...

Interacting with Watir and Cucumber, unfortunately the link is not functional

Being new to the world of Watir and Cucumber, I am currently in the process of running an automation script to create Live IDs. The link that I want to click on the webpage is labeled "New" and it should take me to a form where I can add a new contact for ...

Combining Various Template Variables into a Single Variable in Django

I am facing a challenge in assigning multiple values from a dictionary to a variable within a Django template. For example: fruit.supplier = tesco fruit.color = blue {% with test=fruit.supplier_fruit.color %} {{ test }} {% endwith %} The expected ...

Is it possible to incorporate HTML tags within the <template> section of AIML files?

My goal is to create a simple bot using an AIML file. The idea is that I can input a question and the corresponding pattern will be returned from the file. For instance, I have this sample pattern in my AIML file: <category> <pattern>TEST& ...

Place a div image on top of a form div

Currently, I have a simple form set up with the following HTML code: <div class="card mb-5 card-central-responsive" style="min-height: 579px;"> <div class="card-body"> <form #apkCreationForm="ngForm" class="mt-2" novalidate (ngSubmit ...

What is the method for sending parameters to PHP from an HTML file using AJAX?

My protfolio.html file contains a table #gallery with different categories. I want to dynamically update the content of the #gallery based on the selected category using ajax. I have a php file that scans a specific folder for images related to the categor ...

Enhancing the appearance of child elements using CSS modules in Next.js

My Countdown component implementation includes: import styles from "./Countdown.module.scss"; import React from "react"; import useTimer from "hooks/useTimer"; import cn from "classnames"; function Countdown({ date, ...

Expand or collapse Angular Material Accordion depending on selected Radio button choice

Is it possible to use a mat-accordion with radio buttons where each panel expands only when its corresponding radio button is selected? I have the radio buttons functioning correctly, but the panels are expanding and collapsing with every click rather than ...

Eliminate a specific element from the dataset

My question revolves around a data array used to populate three drop down <select> boxes. How can I eliminate duplicate values within the drop downs without affecting the array itself? For example: data = { firstbox_a: ['grpA_1','gr ...

Unable to insert HTML code into a div upon clicking an image button

I am in the process of developing a website dedicated to radio streams, and I was advised to utilize Jquery and AJAX for loading HTML files into a div upon button click. This way, users wouldn't have to load an entirely new page for each radio stream. ...

Include a proximity button onto the tabs

Currently, I'm diving into learning Bootstrap and one thing I'd like to implement is having an x next to each tab name for easy closing: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

Different from SimplyScroll but with added functionalities

Searching for a replacement for the now deprecated SimplyScroll with specific features. I am in need of a continuous, automatic carousel of boxes/images that halts when hovering over with the mouse (a feature SimplyScroll possesses), and allows movement ...