2014-11-21 326 views
2

问题是在代码中有2格,当鼠标进入第一个div的背景颜色是变化的,当进入第二个div两个背景颜色,现在我想的是改变的时候进入第一div的背景色都是变化的!1 DIV DIV同时改变背景颜色悬停

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

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

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

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

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

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

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

 
.about-mohamad div img { 
 
\t 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> 
 
\t \t <span id="abouthovera">job</span> 
 
\t \t <span id="abouthoverb">name</span> 
 
\t </div> 
 
</div>

回答

1

你必须首先目标悬停<div>改变两个背景。

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

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

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

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

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

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

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

 
.about-mohamad div img { 
 
\t 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> 
 
\t \t <span id="abouthovera">job</span> 
 
\t \t <span id="abouthoverb">name</span> 
 
\t </div> 
 
</div>

+0

你如何解决这个问题?请你解释一下。 – 2014-11-22 10:45:28

+1

你只需要改变'。关于-穆罕默德格:hover'为'。关于-穆罕默德:悬停div'。 – emmanuel 2014-11-22 10:46:25

+0

[链接](http://stackoverflow.com/questions/27769432/position-fixed-with-100-height)能不能帮我找到解决办法吗? – 2015-01-06 11:06:03

0
.aboutboth:hover { 
    background: #e9e9e9; 
} 

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

试试这个

+1

这是一个英文网站,如果你用其它语言编写,有正派翻译。 – 2014-11-21 19:06:21

+0

Ashkufaraz我需要同时改变背景颜色为约·礼萨·格和aboutboth!当鼠标继续左右div! 检查这个! http://jsfiddle.net/6t1u3wsr/当鼠标继续文字“工作”背景颜色变化!但是当鼠标上的图像约-reza div背景颜色变化!当鼠标移动文本时,我怎么能改变背景颜色! – 2014-11-21 19:18:38

+0

约 - 穆罕默德和有关-穆罕默德DIV改变鼠标悬停后两者背景颜色有关,穆罕默德 – 2014-11-21 19:33:52