Change the background color of both divs when hovering over them

There is an issue in the code where there are two div elements. When the mouse hovers over the first div, the background color changes. And when it goes to the second div, both background colors change. The desired behavior is for both background colors to change when hovering over the first div!

.aboutboth {
width: 370px;
margin: 0 auto;
}

.about-mohamad {
margin: 0 auto;
width: 170px;
height: 230px;
background: #666666;
float: left;
text-align: center;
margin-right: 30px;
-webkit-transition: all .5s linear ;
-moz-transition: all .5s linear ;
-o-transition: all .5s linear ;
transition: all .5s linear ;
position: relative;
}

.about-mohamad:hover {
background: #e9e9e9;
}

.about-mohamad div {
margin: 0 auto;
width: 150px;
height: 150px;
background: white;
margin-top: 10px;
margin-bottom: 25px;
-webkit-transition: all .5s linear ;
-moz-transition: all .5s linear ;
-o-transition: all .5s linear ;
transition: all .5s linear ;
}

.about-mohamad div:hover {
background: #2d3030;
}

.about-mohamad span {
display: inline;
font-size: 13px;
display: inline-block;
color: white;
}

.about-mohamad p {
font-size: 10px;
}

.about-mohamad div img {
margin-top: 25px;
}

.about-mohamad span#abouthovera {
    display:inline;
    text-transform: uppercase;
    font-size: 10px;
}
.about-mohamad:hover span#abouthovera {
    display:none;

}
.about-mohamad span#abouthoverb {
    display:none;
}
.about-mohamad:hover span#abouthoverb {
    display:inline;
    color: #666666;
    text-transform: uppercase;
    font-size: 10px;
}
<div class="aboutboth">
    <div class="about-mohamad">
        <div><img src="http://rezaaria.com/1.png"></div>
<span id="abouthovera">job</span>
<span id="abouthoverb">name</span>
</div>
</div>

Answer №1

To change both backgrounds, you must first target the <div> on hover.

.aboutboth {
width: 370px;
margin: 0 auto;
}

.about-mohamad {
margin: 0 auto;
width: 170px;
height: 230px;
background: #666666;
float: left;
text-align: center;
margin-right: 30px;
-webkit-transition: all .5s linear ;
-moz-transition: all .5s linear ;
-o-transition: all .5s linear ;
transition: all .5s linear ;
position: relative;
}

.about-mohamad:hover {
background: #e9e9e9;
}

.about-mohamad div {
margin: 0 auto;
width: 150px;
height: 150px;
background: white;
margin-top: 10px;
margin-bottom: 25px;
-webkit-transition: all .5s linear ;
-moz-transition: all .5s linear ;
-o-transition: all .5s linear ;
transition: all .5s linear ;
}

.about-mohamad:hover div {
background: #2d3030;
}

.about-mohamad span {
display: inline;
font-size: 13px;
display: inline-block;
color: white;
}

.about-mohamad p {
font-size: 10px;
}

.about-mohamad div img {
margin-top: 25px;
}

.about-mohamad span#abouthovera {
    display:inline;
    text-transform: uppercase;
    font-size: 10px;
}
.about-mohamad:hover span#abouthovera {
    display:none;

}
.about-mohamad span#abouthoverb {
    display:none;
}
.about-mohamad:hover span#abouthoverb {
    display:inline;
    color: #666666;
    text-transform: uppercase;
    font-size: 10px;
}
<div class="aboutboth">
    <div class="about-mohamad">
        <div><img src="http://rezaaria.com/1.png"></div>
<span id="abouthovera">job</span>
<span id="abouthoverb">name</span>
</div>
</div>

Answer №2

.hoverEffects {
    background: #f1f1f1;
}

or

.hoverEffects  ~ .additionalEffects {
    background: #aaa
}
 .hoverEffects { 
    background: #aaa}

give this a go

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

Animating with jQuery: Add Some Wiggle with slideDown and slideUp

Having some trouble with a jQuery script I'm working on - specifically, I'm trying to create a dropdown div that appears when the mouse is over a button. However, the div starts moving up and down uncontrollably. Here's what I have so far: ...

What is the best way to initially conceal content and then reveal it only after an ajax call is made?

Currently, I have a situation where content is revealed after the callback function of a .js library (typed.js) executes. Here is the script I am using: Javascript $(function(){ $("#logo-black").typed({ strings: ["Nothing^450&Co^250.^500" ...

sending live video from a Python server to a browser-based client

Is there a way to stream a video from a python server to an HTML page web client (Node.js)? In my Node.js web project, I am currently using Python to write frames and JavaScript to read them. However, I am facing limitations with both frame rate and resol ...

Issue encountered while integrating crispy forms with Django and bootstrap

After developing a sign-in page for my blog using bootstrap and django, I decided to incorporate crispy forms. However, upon attempting to access the page, an error message popped up: TemplateDoesNotExist at /register/. Despite ensuring all redirects and U ...

Issues with table nesting functionality

I'm attempting to organize tables in a nested manner, instead of placing a table within each cell. My engineers have advised against simply styling the table to appear nested, and suggested that it would be more effective to wrap each header around th ...

Upon calling the createModalAddPost() function, a single window is triggered to open

Hey there, I'm having a JavaScript question. So, I have a panel that opens a window, and it works fine. But the issue arises when I close the window and try to open it again - it doesn't work. I have to reload the page every time in order to open ...

Adaptive Table Layout that Creates a Page-breaking Design

I have a page layout with three columns: a fixed-width left-hand navigation, a responsive content column, and a fixed-width right-hand navigation. The issue arises when the content in the middle column includes HTML tables that sometimes exceed the availab ...

What is the process for automatically activating the Enter key once moving to the next text input field?

Hey everyone, I am looking for a way to automatically trigger the enter button after the user switches to another HTML input type='text'. This is necessary for form validation. Below is the code snippet: <input type="text" class="form-contro ...

Centralizing JavaScript Background Video

How can I make my video centered on any screen size? I have the CSS in place to ensure that the video always covers the screen proportionally, but I need help with centering it at all times. HTML <div class="heroWrapper"> <video autoplay muted ...

Centering Tabs in React-Bootstrap

By default, Bootstrap-react's tabs align to the left. <Tabs defaultActiveKey={2} id="uncontrolled-tab-example"> <Tab eventKey={1} title="Tab 1"> Tab 1 content </Tab> <Tab eventKey={2} title="Tab ...

Deactivate and hide button that triggers modal dialog

Combining Bootstrap with AngularJS, I encounter an issue in my application where a link triggers a modal dialog using data attributes. My goal is to disable the button based on a state variable or function. The problem arises when AngularJS still executes ...

Discover the steps to retrieve a specific value from a panel heading

In the panel header, I have a select element that includes numbers ranging from 1 to 512, each number representing a channel. <div class="panel-heading"> <select class="channel"></select> </div> Within the panel body, there is a ...

What could be causing the gap between the top row and the navbar when using Bootstrap 4?

I'm struggling to identify the source of a space or gap in my header section called #contact-stripe that separates it from the navbar. Despite checking for padding or margin settings, I couldn't pinpoint the issue. For better visibility, I' ...

What is the term for the visual display of a product through a photo gallery or slideshow?

Can someone help me identify what the item I'm looking for? You can click on the link to see an example of the product: sephora product example What is the technical term for the section that contains product pictures and slides? Are there any librar ...

Conceal the pop-up when the user selects anywhere else on the webpage

Is there a way to hide this navigation bar when the user clicks anywhere else on the page, other than on the navbar elements? Appreciate your help. https://i.sstatic.net/h82n1.png ...

Escape from an iframe with the help of a buster

My website is being targeted by a code that prevents it from breaking out of an iframe. Despite trying different frame breaker scripts, I have not been successful in resolving this issue. Any assistance would be greatly appreciated. Thanks! Buster: func ...

After the submit button is disabled, the form fails to be submitted

Hello, I am having an issue with disabling my button after the form is submitted. The button gets disabled, but the PHP code does not execute. I have tried various scripts from the internet, but they all seem to have the same result: the button gets disab ...

Is there a way to deactivate the mobile version of Facebook Comments? And, what criteria determine whether a device is considered mobile or not?

I'm now designing Facebook Comments for my personal Wordpress. But I got stuck for the setting on mobile version of it. https://i.sstatic.net/tccLx.png Desktop version of Facebook Comments https://i.sstatic.net/L7Ppy.jpg Mobile version of Facebook Co ...

Tips for aligning the Bootstrap inline form in the center of the webpage

Is there a way to center align my form in such a way that the input box and button appear in the same row? I've tried the code below, but for some reason they don't display inline. Can anyone provide a code sample to help me achieve this? Your as ...

What is the method for conducting rspec tests on HTML attributes?

Using Ruby, I have generated the following HTML: <%= link_to "change", "http://gravatar.com/emails" %> which creates this link: <a href="http://gravatar.com/emails">change</a> However, I want to make sure that the link opens in a new ...