当使用CSS在另一个div上悬停时，更改多个div样式 [英] change multiple div style when Hover on another Div using CSS

问题描述

如果我在第一个Div悬停，其他三个Div受到影响。但我悬停在第二个Div只有下一个Div受到影响，但不是上一个。

 <$ c $ 
 c>< div id =hover1> 
< div class =portfolio_box_skin_2id =mask1> 
< div class =portfolio_image_skin2> 
 Content1 
< / div> 
< div class =cleardiv>< / div> 
< / div>< / div> 
 
< div id =hover2> 
< div class =portfolio_box_skin_2id =mask2> 
< div class =portfolio_image_skin2> 
 Content2 
< / div> 
< div class =cleardiv>< / div> 
< / div>< / div> 
 
< div id =hover3> 
< div class =portfolio_box_skin_2id =mask3> 
< div class =portfolio_image_skin2> 
 Content3 
< / div> 
< div class =cleardiv>< / div> 
< / div>< / div> 
 
< div id =hover4> 
< div class =portfolio_box_skin_2id =mask4> 
< div class =portfolio_image_skin2> 
 Content4 
< / div> 
< div class =cleardiv>< / div> 
< / div>< / div> 
  

和CSS代码：

 ＃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; 
} 
  

演示目的Css代码太高。

我在小提琴演示了点击这里

解决方案

@Marc Audet：第一句话描述了什么是不工作的。当悬停第二个div时，第一个div不会消失。

问题是你选择了上一个同级。查看此链接，我认为您无法以此方式解决此问题。

你可以用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：

 code> .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'）; 
}）; 
  

检查 JSFiddle

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.

解决方案

@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

这篇关于当使用CSS在另一个div上悬停时，更改多个div样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！