Наведите родительский элемент вне текущего родителя css

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>