I have two divs, one after another but float side by side, one is of a button img type thing and the other is some words associated with the what the button is. They are about 20px apart on screen.
我有两个div,一个接一个但是并排浮动,一个是按钮img类型的东西,另一个是与按钮是什么相关的一些单词。它们在屏幕上相距约20px。
What I want to happen is that when you hover over the button it changes and also changes the text, this I can do using the "+" operator in the css file, however I also want when you hover the text for the button to change, this isn't possible with the + as the text div is after the one with the img.
我想要发生的是,当你将鼠标悬停在按钮上时它会改变并改变文本,我可以使用css文件中的“+”运算符来做,但是我也想要当你将文本悬停在按钮上进行更改时,这对于+是不可能的,因为文本div在img之后。
Below is my html and css, is there any simple way to do this? I don't want to really be using javascript and such to do it so if it requires major things I won't bother.
下面是我的html和css,有什么简单的方法可以做到这一点吗?我不想真正使用javascript这样做,所以如果它需要重大的事情,我不会打扰。
I just realized that I changed a few things before asking the question and it doesn't actually work with the + either
我刚刚意识到在提出问题之前我改变了一些东西,但它实际上并没有与+一起使用
I have added a fiddle here: http://jsfiddle.net/LzLyK/1/
我在这里添加了一个小提琴:http://jsfiddle.net/LzLyK/1/
Basically when you hover the square it turns green, when you hover the text it turns green, what I want is to hover the square and square and test turns green and if you hover the text the square and text turns green
基本上当你悬停在广场上它变成绿色时,当你将文本悬停为绿色时,我想要的是悬停正方形和方形,测试变成绿色,如果你将文本悬停在方形和文本变成绿色
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;
}
1 个解决方案
#1
1
The issue is that you're trying to ascend then descend the DOM with CSS which cannot work, CSS selectors can only work on identifying siblings or descendants.
问题是你试图提升然后使用CSS无法运行的DOM下降,CSS选择器只能用于识别兄弟姐妹或后代。
Either wrap the initial a in its child div so both your divs are at the same level, or move class="services-section-img" from the div to its parent a
将初始a包装在其子div中,这样你的div都处于同一级别,或者将div =“services-section-img”从div移到其父级a
Demo Fiddle
Example fiddle of working solution/logic vs your current code
工作解决方案/逻辑与当前代码的示例
Again, CSS cannot ascend the DOM so any adjacency selectors only work by identifying elements following the initially specified element.
同样,CSS无法提升DOM,因此任何邻接选择器仅通过识别最初指定的元素之后的元素来工作。
#1
1
The issue is that you're trying to ascend then descend the DOM with CSS which cannot work, CSS selectors can only work on identifying siblings or descendants.
问题是你试图提升然后使用CSS无法运行的DOM下降,CSS选择器只能用于识别兄弟姐妹或后代。
Either wrap the initial a in its child div so both your divs are at the same level, or move class="services-section-img" from the div to its parent a
将初始a包装在其子div中,这样你的div都处于同一级别,或者将div =“services-section-img”从div移到其父级a
Demo Fiddle
Example fiddle of working solution/logic vs your current code
工作解决方案/逻辑与当前代码的示例
Again, CSS cannot ascend the DOM so any adjacency selectors only work by identifying elements following the initially specified element.
同样,CSS无法提升DOM,因此任何邻接选择器仅通过识别最初指定的元素之后的元素来工作。