Question

我正在尝试在链接悬停时创建一个不包含当前父更改的包装器。

<div id="appswrapper">

        <div id="appsspace01"></div>
        <div id="appsspace02"></div>

        <div id="gotomail">
            <a href="#" target="_blank" style="width:305px; height:45px; display:block;"></a>
        </div>

        <div id="labsampler">
            <a href="#" style="width:100px; height:115px; display:block;"></a>
        </div>

        <div id="batchcoder">
            <a href="#" style="width:100px; height:115px; display:block;"></a>
        </div>

        <div id="blank"></div>

        <div id="camviewer">
            <a href="#" style="width:100px; height:115px; display:block;"></a>
        </div>

        <div id="staffpresence">
            <a href="#" style="width:100px; height:115px; display:block;"></a>
        </div>

        <div id="rawmatstock">
            <a href="#" style="width:100px; height:115px; display:block;"></a>
        </div>

        <div id="equipmenttracker">
            <a href="#" style="width:100px; height:115px; display:block;"></a>
        </div>

        <div id="complaintsmanager">
        <a href="#"  style="width:100px; height:115px; display:block;"></a>
        </div>

        <div id="callback">
            <a href="#" style="width:100px; height:115px; display:block;"></a>
        </div>

    </div>

    <div id="wrappertest"></div>

css：

#appswrapper{
width: 320px;
height: 500px;
float:left;

}

#appsspace01{
width:10px;
height:500px;
float:left;
}

#appsspace02{
width:310px;
height:5px;
float:left;
}
#gotomail{
width:310px;
height:50px;
float:left;
background:url(../Images/gotomail.png);
}
#gotomail:hover{        
opacity: .4;
width:310px;
height:50px;
float:left;
background:url(../Images/gotomail.png);
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
#labsampler{
width:103px;
height:117px;
float:left;
background:url(../Images/labsampler.png);
}
#labsampler:hover{
width:103px;
height:117px;
float:left;
background-image: url(../Images/labsampler.png);
background: url(../Images/labsampler.png);
opacity: .4;
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
#batchcoder{
width:103px;
height:117px;
float:left;
background:url(../Images/batchcoder.png);
}
#batchcoder:hover{
width:103px;
height:117px;
float:left;
background:url(../Images/batchcoder.png);
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
opacity: .4;
}
#blank{
width:104px;
height:117px;
float:left;
background:url(../Images/blank.png);
}
#rawmatstock{
width:104px;
height:117px;
float:left;
background:url(../Images/rawmatstock.png);
}
#rawmatstock:hover{
width:104px;
height:117px;
float:left;
background:url(../Images/rawmatstock.png);
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
opacity: .4;
}
#camviewer{
width:103px;
height:117px;
float:left;
background:url(../Images/camviewer.png);
}
#camviewer:hover{
width:103px;
height:117px;
float:left;
background:url(../Images/camviewer.png);
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
opacity: .4;
}
#staffpresence{
width:103px;
height:117px;
float:left;
background:url(../Images/staffpresence.png);
}
#staffpresence:hover{
width:103px;
height:117px;
float:left;
background:url(../Images/staffpresence.png);
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
opacity: .4;
}
#callback{
width:104px;
height:117px;
float:left;
background:url(../Images/callback.png);
}
#callback:hover{
width:104px;
height:117px;
float:left;
background:url(../Images/callback.png);
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
opacity: .4;
}
#complaintsmanager{
width:103px;
height:117px;
float:left;
background:url(../Images/complaintsmanager.png);

}
#complaintsmanager:hover{
width:103px;
height:117px;
float:left;
background:url(../Images/complaintsmanager.png);
opacity: .4;
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
#equipmenttracker{
width:103px;
height:117px;
float:left;
background:url(../Images/equipment-tracker.png);
}
#equipmenttracker:hover{
width:103px;
height:117px;
float:left;
background:url(../Images/equipment-tracker.png);
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
opacity: .4;
}
#wrappertest{
width: 620px;
height: 290px;
float:left;
background:url(../Images/testwrapper.png);
}

到目前为止我尝试了什么：

#callback:hover ~ #wrappertest {
background: url(../Images/rubiolabsampler.png); 
}
#callback:hover + #wrappertest {
background: url(../Images/rubiolabsampler.png);
}

#callback:hover #wrappertest {
background: url(../Images/rubiolabsampler.png);
}
#callback:hover > #wrappertest {
background: url(../Images/rubiolabsampler.png); 
}

我可以使用CSS悬停系统将wrappertest更改为另一个背景吗？我不能将它们放在同一个包装器中，因为它是一个复杂的设计。

Answer 1

如果删除<div id="appswrapper">换行，则可以使用

#callback:hover + #wrappertest {
  background: url(../Images/rubiolabsampler.png);
}

您尝试过的其他解决方案需要#wrappertest位于#callback

内

如果您需要保留标记，我会使用jQuery来执行此操作：

  $(document).ready(function(){
    $('#callback').hover(function () {
      $('#wrappertest').css('background-image','url("Images/testwrapper.png")');
    },
    function () {
      $('#wrappertest').css('background-image','');
    });
  });

然后在您网站的头部包含jQuery lib：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

将父项悬停在当前父css之外

1 个答案: