CSS On Hover在它之前和之后更改div

Question

我有两个div，一个接一个但又并排，一个是img类型的按钮，另一个是与按钮相关的单词。 它们在屏幕上相距约20像素。

我想发生的是，当您将鼠标悬停在按钮上时，它会更改并且还会更改文本，这可以使用css文件中的“ +”运算符来完成，但是我也希望当您将鼠标悬停在按钮上以更改文本时，使用+是不可能的，因为文本div位于带有img的文本之后。

以下是我的html和CSS，是否有任何简单的方法可以做到这一点？ 我不想真正使用javascript之类的工具，所以如果它需要主要的东西，我就不会打扰。

我只是意识到在问这个问题之前我已经做了一些改变，但实际上无论如何都不能使用+

我在这里添加了一个小提琴： http : //jsfiddle.net/LzLyK/1/

基本上，当您将鼠标悬停在正方形上时，它变成绿色，当您将文本悬停在它上时变成绿色，我要悬停在正方形和正方形上，然后测试变成绿色，如果您将文本悬停在该正方形和文本上变成绿色

HTML

<div class="services-section-holder">
    <a href="#"><div class="services-section-img"></div></a>
    <div class="services-section-title"><p><a href="#">Exhibition</a></p></div>
</div>

CSS

.services-section-holder{
    position:relative;
    width:270px;
    height:70px;
    margin-bottom:5px;
}
.services-section-img{
    position:relative;
    width:80px;
    height:75px;
    float:left;
    background:url(../images/greycircle.jpg);
}
.services-section-title{
    position:relative;
    float:left;
    height:75px;
    margin: 0 auto;
    display: table;
    padding-left:20px;
}
.services-section-title a {
    text-decoration:none;
}
.services-section-title a {
    color:#000;
}
.services-section-title a:hover {
    color:#906;
}
.services-section-img:hover {
    background:url(../images/greycirclehover.jpg);
}
.services-section-img:hover + .services-section-title a{
    color:#906;
}

Answer 1

问题在于，您尝试使用无法升序的CSS来提升DOM，然后降级DOM，CSS选择器只能在标识同级或后代时起作用。

自动换行最初a在其子div所以无论你divs都在同一水平，或移动class="services-section-img"从div到其父a

演示小提琴

工作解决方案/逻辑与当前代码的对比

同样，CSS无法提升DOM，因此任何邻接选择器只能通过标识最初指定的元素之后的元素来工作。