CODEWITHSUNDEEP
csshtml
Praveen Kumar
Praveen Kumar

Reputation: 236

change multiple div style when Hover on another Div using CSS

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.

Upvotes: 2

Views: 8810

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

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/

Upvotes: 1

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

@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

Upvotes: 0

Related Questions