2

如果我悬停在第一个 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 代码太高了。

我在 Fiddle 中做了一个演示，点击这里查看演示。

4

2 回答 2

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/

于 2013-07-05T12:52:11.590 回答
0

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

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

查询：

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

检查JSFiddle

于 2013-07-05T12:05:33.397 回答