Question

我有两个div，一个接一个但是并排浮动，一个是按钮img类型的东西，另一个是与按钮是什么相关的一些单词。它们在屏幕上相距约20px。

我想要发生的是，当您将鼠标悬停在按钮上时，它会更改并更改文本，我可以使用＆＃34; +＆＃34; 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下降，CSS选择器只能用于识别兄弟姐妹或后代。

将初始a打包到其子div中，以便divs处于同一级别，或将class="services-section-img"从div移至其a父{{1}}

Demo Fiddle

Example fiddle of working solution/logic vs your current code

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

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

1 个答案:

Demo Fiddle