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，因此任何鄰接選擇器只能通過標識最初指定的元素之后的元素來工作。