CODEWITHSUNDEEP
htmlcsshover
Reza Aria
Reza Aria

Reputation: 157

1 div inside another div change both background color hover

the problem is in code have 2 div, when mouse go to first div background color is change and when go to second div both background color is change now i want when go to first div both background color is change!

.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>

Upvotes: 2

Views: 311

Answers (2)

emmanuel
emmanuel

Reputation: 9615

You have to target first <div> hover to change both backgrounds.

.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>

Upvotes: 1

ashkufaraz
ashkufaraz

Reputation: 5297

.aboutboth:hover {
    background: #e9e9e9;
}

or 

.aboutboth:hover  ~ .about-reza {
    background: #ccc
}
 .aboutboth:hover { 
    background: #ccc}

try this

Upvotes: 0

Related Questions