改变元素的CSS

我有以下HTML：改变元素的CSS

<div class="wraper"> 
    <div class="elementA"></div> 
    <div class="elementB"></div> 
    <div class="elementC"></div> 
</div>

我需要改变的background-color elementA当我们徘徊在elementC。我尝试了很多CSS示例，但没有成功。

如何通过使用CSS来实现？没有JavaScript或JQuery。

来源

2014-03-28 Ted

http://jsfiddle.net/ThinkingStiff/a3y52/看这里 – user2167382

它再次是位置的元素可以用CSS来完成，但有一些限制可能会阻止您使用它。我将:hover移到了父元素上，并在元素B上关闭了pointer-events。不幸的是，这意味着对于IE，IE11+ will be required。 Chrome和Firefox已经有很好的支持。我还必须重置元素A上的background-color，否则当将鼠标悬停在元素A上时，颜色也会被修改。最后，您真实网页上的标记和其他CSS可能会有所不同，这也可能会阻止这是一个很好的解决方案。

在CSS中我没有其他办法可以做到这一点，所以如果这不符合您的要求，那么JavaScript是唯一的解决方案。

Demo

HTML

<div class="wrapper"> 
    <div class="elementA">A</div> 
    <div class="elementB">B</div> 
    <div class="elementC">C</div> 
</div>

CSS

.wrapper:hover .elementA { 
    background-color:red; 
} 

div { 
    width:20px; 
    height:20px; 
} 

.wrapper div { 
    border:1px dashed lightskyblue; 
} 

.elementB { 
    pointer-events:none; 
} 

.wrapper .elementA:hover { 
    background-color:white; 
}

来源

2014-03-28 09:41:17 andyb

它工作:)谢谢！ – Ted

乐于帮助。这是一个有趣的问题！ – andyb

是的，你能做的只有用CSS，但 'elementA' 后必须 'elementC' 下面的代码

.elementC:hover ~ .elementA { 
    color: #ccc /* example */ 
}

而且的一般兄弟选择

来源

2014-03-28 09:09:14 AndrePliz

“，但“elementC '必须在'elementA'之后'“我们我不能改变元素位置:( – Ted

不可能只有CSS。用JS :) – AndrePliz

并非不可能:) – andyb

here's the documentation如果你想要在纯CSS中做到这一点，这将是困难的，但并非不可能。你可以玩浮游物（水平）或可能更动态，绝对的元素。当然，你需要有一个已知的元素宽度/高度来定位它们。

HTML：

<div class="wrapper"> 
    <div class="elementC"></div> 
    <div class="elementA"></div> 
    <div class="elementB"></div> 
</div>

CSS（无位置值）。

.wrapper { 
    position:relative; 
} 

.wrapper>div { 
    position:absolute; 
} 

.elementC:hover+.elementA { 
    background-color:#333; 
}

使用位置值（顶部，右侧，底部，左侧）可以更改元素的可见位置。加号选择之前选中的下一个元素。

来源

2014-03-28 09:14:40 user3360311

一个更多的时间:) 元素的位置可以是仅次于：

NO “C”， “A” 之前！ – Ted

这对纯粹的CSS来说是不可能的恐怕......固定订单的原因是什么？对于我可以想象的可见位置，因此在我的答案中定位。 – user3360311

是的，它是关于位置，我可以尝试通过CSS交换DIV位置。但是尼克确定现在该怎么做，实际上我在CSS中并不强壮 – Ted

您无法选择selector之前的sibling。

但是有两个可能的解决方案，无论是与Javascript做到这一点，或者你可以简单地重新排序在现在的位置，让你选择的话，重新排序它通过设置Position: Absolute;

来源

2014-03-28 09:35:25 Explisam

wrapper{ background:black;} 

.elementA { 
    display: block; 
    width: 100%; background:blue; 
    height: 50px; 
} 

.elementB { 
    display: block; 
    color: #ffffff; 
    background-color:red; 
    text-align: center; 
    width:100%; 
    padding: 10px; 
} 


.elementC { 
    display: block; 
    color: #ffffff; 
    background-color:pink; 
    text-align: center; 
    width:100%; 
    padding: 10px; 
} 

.elementA:hover + .elementC + .elementB { 
    display: block; 
    background:green; 
}

来源

2014-03-28 09:47:34

改变元素的CSS

回答

相关问题