CODEWITHSUNDEEP
htmlcsshoveropacity
ddarbyshire
ddarbyshire

Reputation: 25

Div Opacity onHover Of A Separate Div

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?

Upvotes: 0

Views: 130

Answers (2)

ddarbyshire
ddarbyshire

Reputation: 25

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/

Upvotes: 1

Alex Beals
Alex Beals

Reputation: 2135

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.

Upvotes: 1

Related Questions