change multiple div style when Hover on another Div using CSS

Question

If I Hover on first Div other three Div is affected. But I Hover on second Div only the next Div is affected but not the Previous. And same for the Third and Fourth.

Here the HTML Code:

<div  id="hover1">
<div class="portfolio_box_skin_2" id="mask1">
<div class="portfolio_image_skin2">
Content1
</div>
<div class="cleardiv"></div>    
</div></div>

<div  id="hover2">
<div class="portfolio_box_skin_2" id="mask2">
<div class="portfolio_image_skin2">
Content2
</div>
<div class="cleardiv"></div>    
</div></div>

<div  id="hover3">
<div class="portfolio_box_skin_2" id="mask3">
<div class="portfolio_image_skin2">
Content3
</div>
<div class="cleardiv"></div>    
</div></div>

<div  id="hover4">
<div class="portfolio_box_skin_2" id="mask4">
<div class="portfolio_image_skin2">
Content4
</div>
<div class="cleardiv"></div>    
</div></div>

and the CSS code:

#hover1,#hover2,#hover3,#hover4
{
    width:100px;
    height:100px;
    float:left;
}
.portfolio_image_skin2
{
    width:100px;
    height:100px;
}
#mask1,#mask2,#mask3,#mask4
{
    opacity:1;
    background-color:#0CF;
}
#hover1:hover + #hover2 #mask2,
#hover1:hover ~ #hover3 #mask3,
#hover1:hover ~ #hover4 #mask4
{
    /* CSS */
    display:block!important;    
    opacity:0.5;
    transition: 0.5s all;
    padding-right:19px;     
}
#hover2:hover + #hover3 #mask3,
#hover2:hover ~ #hover4 #mask4,
#hover2:hover ~ #hover1 #mask1
{
    /* CSS */
    display:block!important;    
    opacity:0.5;
    transition: 0.5s all;
    padding-right:19px;     
}
#hover3:hover ~ #hover1 #mask1,
#hover3:hover ~ #hover2 #mask2,
#hover3:hover ~ #hover4 #mask4
{
    /* CSS */
    display:block!important;    
    opacity:0.5;
    transition: 0.5s all;
    padding-right:19px;     
}
#hover4:hover + #hover1 #mask1,
#hover4:hover ~ #hover2 #mask2,
#hover4:hover ~ #hover3 #mask3
{
    /* CSS */
    display:block!important;    
    opacity:0.5;
    transition: 0.5s all;
    padding-right:19px;     
}

for the demo purpose Css code is too high.

I Have made a demo in the Fiddle Click Here for the Demo.

You forgot to tell us what effect you are trying to achieve. Please do! — Marc Audet, Jul 05 '13 at 11:38
Fade Effect @MarcAudet. I have done this by opacity:0.5; . Hope You will solve this — Praveen Kumar, Jul 05 '13 at 12:12

score 1 · Answer 1 · answered Jul 05 '13 at 12:52

A CSS Based Solution

You can achieve a similar effect using CSS only provided that you make a small change to your HTML.

Consider the following HTML snippet:

<div class="link-wrap">
    <div class="link-panel">Link 1</div>
    <div class="link-panel">Link 2</div>
    <div class="link-panel">Link 3</div>
    <div class="link-panel">Link 4</div>
</div>

The key is to set up a containing block .link-wrap for your .link-panel elements.

You then can apply the following CSS.

First, you set up the default styles for the case of no hover over the links:

.link-wrap {
    background-color: lightgray;
    overflow: auto;
    display: inline-block;
}
.link-panel {
    width: 100px;
    line-height: 100px;
    text-align: center;
    background-color: blue;
    color: white;
    float: left;
    margin: 10px; /* Optional: To show edges of container block */
}

To get the hover effects, you first reset the default style on all the .link-panel elements, and then apply a specific style for the .link-panel:hover element being targeted:

.link-wrap:hover .link-panel {
    background-color: yellow;
    color: black;
}
.link-wrap .link-panel:hover {
    background-color: green;
    color: white; /* Careful about inheritance of colors and other properties */
}

In this simple example, when you hover a link, it turns green, and all the remaining ones turn yellow. Note that there is an edge effect when you mouse over the lightgray area, which causes all the links to turn yellow but since you are not exactly on a link, a link is not selected hence no one turns green. However, you can easily work around this by adding an child wrapper within .link-panel, but it all depends on what you are trying to do.

You can see a working demo at: http://jsfiddle.net/audetwebdesign/fGNgz/

score 0 · Accepted Answer · edited May 23 '17 at 12:21

@Marc Audet: The first sentence describes preciously what isn't working. When hovering the second div, the first div doesn't fade.

The problem is that you what to select the previous sibling. Looking at this link, I think you can't fix it this way.

You could however fix it with JQuery HTML:

<div  class="mainBox">
<div class="mask portfolio_box_skin_2">
<div class="portfolio_image_skin2">
Content1
</div>
<div class="cleardiv"></div>    
</div></div>

<div  class="mainBox">
<div class="mask portfolio_box_skin_2">
<div class="portfolio_image_skin2">
Content2
</div>
<div class="cleardiv"></div>    
</div></div>

<div  class="mainBox">
<div class="mask portfolio_box_skin_2">
<div class="portfolio_image_skin2">
Content3
</div>
<div class="cleardiv"></div>    
</div></div>

<div  class="mainBox">
<div class="mask portfolio_box_skin_2">
<div class="portfolio_image_skin2">
Content4
</div>
<div class="cleardiv"></div>    
</div></div>

CSS:

.mainBox
{
    width:100px;
    height:100px;
    float:left;
}
.portfolio_image_skin2
{
    width:100px;
    height:100px;
    margin-right:10px;
}
.mask
{
    opacity:1;
    background-color:#0CF;
}
.maskHover
{
    /* CSS */
    display:block!important;    
    opacity:0.5;
    transition: 0.5s all;
    padding-right:19px;     
}

JQUERY:

$(".mainBox").hover(function(){
    $( ".mainBox" ).each(function() {
        $(this).children(".mask").toggleClass('maskHover');
    });
    $(this).children(".mask").removeClass('maskHover');
});

Check JSFiddle

which JQuery library needs to be imported. Jquery Latest isn't working on local Host .. Help needed immediately. — Praveen Kumar, Jul 05 '13 at 12:49
On JSFiddle the latest JQuery is used 1.10.1... you can download it from their website. — GreyRoofPigeon, Jul 05 '13 at 14:13

change multiple div style when Hover on another Div using CSS

2 Answers2

A CSS Based Solution

Linked