Div Opacity onHover Of A Separate Div

Question

I am trying to create an event with just CSS that will have a DIV (which is coloured white) turn from 0.6 opacity to 1.0 opacity when I hover over a separate div, so much so that when I hover over one div the other looks as if it is faded out.

My code can work if I wanted the div I hover over to fade but I want to hover and change the other div not the one I am hovering over.

HTML

<div id="sell1">
<div class="s1"></div>
</div>
<div id="gap"></div>
<div id="sell2">
<div class="s2"></div>
</div>

CSS

#sell1 {
   height:100px;
   width:100%;
   background-color: rgb(50,70,130);
}
#sell2 {
   height:100px;
   width:100%;
   background-color: rgb(50,70,130);
}
#gap {
   height:50px;
   background-color:white;
}
.s1, .s2 {  
   width:100%;
   height:247px;
   position:absolute;
   background:rgba(255, 255, 255, 0.6);
   opacity:0;
   -webkit-transition: opacity .25s ease;
   -moz-transition: opacity .25s ease;
}
#sell2:hover .s1  {     
   opacity:1;
}

http://jsfiddle.net/UgsyL/186/

So here I want to hover over the "sell2" div and have .s1 turn from 0.6 to 1.0 opacity.

Any help?

This isn't possible without introducing some JavaScript, as `.s1` is not a child of `#sell2`. — James Donnelly, Aug 19 '14 at 13:52
possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Paulie_D, Aug 19 '14 at 13:54
Nope, absolutely impossible with pure CSS. The other way around is possible. It is possible to hover `#sell1` and than make `.s1` fade, therefor you can use `#sell1:hover ~ #sell2 .s2 { ... }`, also see http://jsfiddle.net/LinkinTED/UgsyL/190/ — LinkinTED, Aug 19 '14 at 14:12
@Brian: nope, he want's to hover `#sell2` and trigger `.s1`... not hover `#sell1` triggering `.s2`... :) — LinkinTED, Aug 19 '14 at 14:17
Because the `~` (i.e. `first ~ second`) selector selects all `second` elements that are preceded by `first` elements, and since in this case `sell1` precedes `sell2`, it will only work for `sell1 ~ sell2` and not the inverse — ctwheels, Aug 19 '14 at 14:24
Also, take a look at this: http://stackoverflow.com/questions/1817792/css-previous-sibling-selector and this: http://www.w3schools.com/cssref/css_selectors.asp — ctwheels, Aug 19 '14 at 14:41

score 1 · Answer 1 · answered Aug 19 '14 at 14:27

With your current setup of HTML, that's impossible. However, as LinkinTED pointed out, it's possible to hover #sell1 and make .s1 fade, by styling #sell1:hover ~ #sell2 .s2 { ... }.

If you need only to hover #sell2 and change .s1, you can switch their places in the HTML, making it:

<div id="sell2">
    <div class="s2"></div>
</div>
<div id="gap"></div>
<div id="sell1">
    <div class="s1"></div>
</div>

And then style the divs with relative and absolute positioning to be switched, as well as styling the hover with the code provided by LinkinTED.

score 1 · Answer 2 · answered Aug 19 '14 at 15:11

1

This isn't THE answer to the question I asked originally but it is a work around I finally figured out that works for what I am wanting to do.

HTML

<ul>
    <li><div></div></li>
    <br/>
    <li><div></div></li>
</ul>

CSS

div {
    background-color: rgb(40,80,120);
    height: 100px;
    width: 200px;
}
ul li {
    display: inline-block;
}

ul li div {
    opacity: 1;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    transition: opacity .5s;
}

ul:hover li div {
    opacity: .5;
}

ul:hover li div:hover {
    opacity: 1;
}

http://jsfiddle.net/xbMtN/7/

answered Aug 19 '14 at 15:11

ddarbyshire

25
7

Nice that you got it working, but semantically it's ugly as hell. Placing a block element in a list (although it's allowed in HTML5), I still think is bad practice. And a line break in a list isn't allowed. Rather add a margin-bottom to the fist item. – LinkinTED Aug 19 '14 at 19:29
Yes I know I set my head to finding a solution before making it less ugly, I have now made it look much better, instead of using a list I have used a series of divs. CSS looks very similar but just means everything is a DIV. – ddarbyshire Aug 20 '14 at 08:47

Div Opacity onHover Of A Separate Div

2 Answers2