0

当链接悬停时，我正在尝试制作一个不属于当前父更改的包装器。

<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 更改为另一个背景吗？我不能将它们放在同一个包装器中，因为它是一个复杂的设计。

4

1 回答 1

0

If you remove the <div id="appswrapper"> wrap, you could use 

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

The other solutions you've tried require #wrappertest to be inside #callback

If you need to keep the markup as it is, I would use jQuery to do this:

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

Then include jQuery lib in head of your site:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
于 2013-08-12T14:20:11.363 回答