Adjusting the background color of two divs simultaneously

I'm trying to create a link that changes its background color when hovered over, but the issue is there are two child divs inside this parent div. When I move the mouse within the boundaries of the parent div, it's actually on a child div. This means one child div changes on hover, but the other does not.

Is there a way to make both child divs change when hovering over one using CSS?

If necessary, I am open to switching to tables for an easier solution, but the goal is to find a way to make the entire div or row change when hovering over one child or cell.

I'm aiming to create something similar to the YouTube recommended videos boxes on the right side of the page.

Thanks in advance

CSS

#parent {
width: 318px;
height: 90px;
background-color: #FFFFFF;
margin: 5px 0px 5px 0px;
font-size: 10px;
}

#parent:hover {
background-color: #0000ff;
}

#child1 {
width:120px;
float:left;
}

#child2 {
width:188px;
float:right;
}

HTML (with some other stuff)

<c:forEach var="item" items="${list}">
<a href="webpage?item.getinfo()">
    <div id="parent">
        <div id="child1">
            <img src="img.jpg">
        </div>
        <div id="child2">
            ${item.getinfo2()} <br>
            ${item.getinfo3()} <br>                      
        </div>
    </div>
</a>
</c:forEach>

This code is similar to what I have been working with, constantly tweaking and modifying to achieve the desired result.

Answer №1

To achieve the desired hover effect on the first element using CSS only, you can add the following styling:

.mavehoverable > div:hover, .makehoverable > div:hover + div {
    background-color: red;
}

Here is an example HTML structure:

<div class="makehoverable">
    <div>Child 1</div>
    <div>Child 2</div>
</div>

When hovering over Child 1, Child 2 will also be highlighted. However, achieving the opposite effect with CSS alone would require JavaScript.

Answer №2

It appears that making a small adjustment to one line of your CSS code may resolve the issue at hand. Please modify the following:

#parent :hover {
  background-color: #0000ff;
}

to read as follows:

#parent:hover {
  background-color: #0000ff;
}

This modification worked for me, so hopefully it will work for you as well.

Answer №3

Why not give jQuery a try? Here's an example of what you could do:

http://jsfiddle.net/UtdYY/

HTML:

<div class='color'>
  <div class='color child'>test123</div>
  <div class='color child'>test456</div> 
</div>   

Javascript:

$('.color').hover(function(){ $(this).toggleClass('red'); });

CSS:

.red { color:red; }
.child {height: 50px; }
​  

Edit: Updated the javascript for better readability, credits to elclanrs

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

Tips for creating a full-screen background image using HTML and CSS

I am looking to achieve a full-screen background image using HTML and CSS. I have configured all the necessary properties for the background image. Here is where my background image is located: [![enter image description here][1]][1] I have attempted to ...

Implementing PHP echo alerts using Javascript

My current task involves validating the IP address entered in a textbox using PHP. $('#check_ip').click(function() { var iptext = $('#Ip_Txt').val(); $.ajax({ type : "POST", url : "mypage.php", data : { iptext : ip ...

Can the text inside a div be styled to resemble h1 without using an actual h1 tag?

Is it feasible to apply the h1 style to all text within a div without utilizing tags? For instance: <div id="title-div" style="h1">My Title</div> Or a potential solution could be: #title-div { style: h1; //Imports all s ...

How can you make divs adapt to screen resizing in a similar way to images?

In my REACT project, I am faced with the challenge of positioning three divs next to each other, with a small margin between them, and ensuring they are horizontally centered on the screen. As the screen width decreases, I need the right-most div to move ...

Is HTML5 capable of supporting a multi-file uploader system in browsers?

Can you tell me which web browsers currently support the ability to select multiple files in an upload form, as introduced in the HTML5 spec? And does Adobe AIR also support this feature? As a bonus question, I'm curious if there are any JavaScript l ...

The display:flex property with justify-content:space-around is malfunctioning in React and causing issues

I've been trying to troubleshoot the issue with my header, but so far I haven't found a solution. Could you please take a look at my code first? // Code simplified for clarity, no need to worry about variables const Header = () => { return ...

Capture user input from an HTML form and save it as key-value pairs in a JSON object, which can accommodate multiple input

I'm trying to figure out how to collect input from an HTML form and save it into a JSON object for AJAX use. The traditional method of $('#id').val(); won't work in this case because there are multiple fields, as shown below. Here' ...

submit a new entry to add a record to the database

Hey there, I recently started learning PHP and JS and I'm trying to insert a row into a WordPress database table. I need to get the information needed for insertion from another table, but I'm facing an issue with the PHP file as it's not in ...

Is there a way to open a particular Bootstrap tab within a modal using a URL?

I am seeking a way to automatically open a specific tab within a modal using its URL. To achieve this, I have included the following JavaScript code at the end of my website. By entering website.com/#modal-6 in the browser, it will open with modal-6 activa ...

Side-menu elevates slider

Struggling to keep my slider fixed when the side-menu slides in from the left? I've scoured for solutions without luck. Any expert out there willing to lend a hand? Code Snippet: https://jsfiddle.net/nekgunru/2/ ...

Using AdBlock Plus will conceal elements on a webpage that have ids or classes containing the term "ad"

In my website, there are two divs: one with the ID of ad_holder and the other with the ID ad_buttons. While testing the site on Mozilla with Adblock Plus installed, I observed that both divs were hidden. Upon further investigation, I discovered that Adblo ...

Exploring the world of JQuery Ajax selectors

I am attempting to create a comment system similar to the one found at . I have the AJAX code below, but I am having trouble uniquely selecting text areas for each post. The issue is that the number of posts can vary, so it's important that each post ...

Contact form repair completed - Messages successfully delivered

I am facing an issue with the contact form on my HTML landing page. Currently, when you click the 'Submit' button, it redirects to a new PHP page displaying 'Success'. Is there a way to make it so that upon clicking 'Submit' a ...

Using HTML5 video to play a specific segment of a video

Is there a simple way to play a specific segment of an HTML5 video? Let's say I have a 30 second clip and I only want to watch seconds 5-20. I also want to hide the rest of the video from the user interface, so that only the 5-20 sec part is visible o ...

What is the process of setting a TypeScript variable to any attribute value?

I have a variable declared in my TypeScript file public variableName: something; I want to use this variable to replace the value of custom attributes in my HTML code <input type="radio" name="someName" id="someId" data-st ...

Is there a way to apply a setTimeout to a <div> element upon the first click, but not on subsequent clicks?

Check out the fiddle I've created: http://jsfiddle.net/dkarasinski/dj2nqy9c/1/ This is the basic code. I need assistance with a functionality where clicking on a black box opens a black background and then after 500ms a red box appears. I want the ...

The optimal method for designing a select menu to ensure it works smoothly on various web browsers

Recently, I encountered an issue with customizing a select menu using CSS and jQuery. After some work, I was able to achieve a result that I am quite pleased with: So far, the styling works perfectly in Mozilla, Opera, Chrome, and IE7+. Below is the curr ...

Attempting to sort through elements in JavaScript

I'm looking to filter specific films based on choices made in the dropdown menus below. <select id="filmDropdown"> <option value="0">All Films</option> <option value="1">Film 1</option> <option ...

Tips on accessing a child attribute value such as id when clicking with jQuery

Whenever I click on a specific li element, I want to retrieve the id of that particular li instead of its parent. Currently, when clicking on a child li, both the parent and current ids are being displayed. I only need the current li id. I am seeking assi ...

Optimizing JavaScript for efficient handling of large arrays

I'm currently developing an image editing program using JavaScript to expand my knowledge of the language. The images I am working with are typically around 3000 x 4000 pixels in size, resulting in a total of 48,000,000 values to manage when convertin ...