另一个div内的1 div改变两种背景颜色悬停

Question

问题是在代码中有2个div，当鼠标转到第一个div背景颜色改变而当转到第二个div时两个背景颜色都改变了我想要的时候去第一个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

您必须首先定位<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: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

.aboutboth:hover {
    background: #e9e9e9;
}

或

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

试试这个