Search code examples
csshoverparent

Hover a parent outside current parent css

I'm trying to make a wrapper that is not part of the current parent change when the link is hovered. 

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

The 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);
}

What I tried so far:

#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); 
}

Can I use the CSS hover system to make the wrappertest change into another background? I can't put them in the same wrapper because it's a complex design.

Solution

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