Question

如果我在第一个Div上盘旋，则其他三个Div受到影响。但我在第二个Div上盘旋，只有下一个Div受影响但不是前一个。同样适用于第三和第四。

这里是HTML代码：

<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>

和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代码太高。

我已经在小提琴Click Here中为演示做了一个演示。

Answer 1

基于CSS的解决方案

只有对HTML进行少量更改，才能使用CSS实现类似的效果。

请考虑以下HTML代码段：

<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>

关键是为.link-wrap元素设置一个包含块.link-panel。

然后您可以应用以下CSS。

首先，为没有悬停在链接上的情况设置默认样式：

.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 */
}

要获得悬停效果，首先要重置所有.link-panel元素的默认样式，然后为要定位的.link-panel:hover元素应用特定样式：

.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 */
}

在这个简单的示例中，当您悬停链接时，它会变为绿色，其余所有变为黄色。请注意，当您将鼠标悬停在浅灰色区域上时会产生边缘效应，这会导致所有链接变为黄色，但由于您不是完全在链接上，因此未选择链接，因此没有人变为绿色。但是，您可以通过在.link-panel中添加子包装器轻松解决此问题，但这一切都取决于您要执行的操作。

您可以在http://jsfiddle.net/audetwebdesign/fGNgz/

看到有效的演示

Answer 2

@Marc Audet：第一句话很好地描述了什么是无效的。当悬停第二个div时，第一个div不会褪色。

问题是你要选择以前的兄弟姐妹。看看这个link，我认为你不能这样解决它。

然而，您可以使用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');
});

检查JSFiddle

使用CSS将鼠标悬停在另一个Div上时更改多个div样式

2 个答案:

基于CSS的解决方案