CSS pseudo classes - turning on without hovering or activating link

[marten kay]

I am look to develop span pairs - one containing text and another an image - as control/button/links on a web page; giving users both a text and graphic cue. I wish to synchronize the pseudo class for both elements in the pair, that is, should the mouse hover over the text span, the image hover pseudo class should turn on as well.

I there a way to achieve this? my example is below, pretty stock standard.

Marten

<div id="8" class="action">
<span class="action_text">Add Resource</span>
<span class="add_resource"/>
</div>

.action_text{
    font-family:arial; 
    font-size:12px; 
    font-weight:bold; 
    color:pink; 
    text-decoration:underline; 
    cursor:pointer; 
}
.action_text:hover{
    color:blue; 
}
.action_text:active{
    color:purple; 
}

/*image_add_resource*/
.add_resource{
    background-image:url(img/add_resource.png); 
}
.add_resource:hover{
    background-image:url(img/add_resource_hover.png); 
}
.add_resource:active{
    background-image:url(img/add_resource_active.png); 
}

[Bear Bibeault]

Put the :hover on the parent.

[marten kay]

Thanks, I should have thought of that.

but that would work for the text, but not necessarily for the image background in the second span... I will play around

[marten kay]

I'm able to get the text to change when the mouse hovers/actives the image by putting the pseudo class on the parent (see below) but I can't do that for the image.

 <div id="14" class="tri_state_text action hoverdown">
<span class="action_text">View All</span>
<span class="view_all"/>
</div> 

 .tri_state_text:{  
     color:blue;   
 } 
 .tri_state_text:hover{  
     color:green;   
 }  
 .tri_state_text:active{  
     color:red;   
}  
 .action_text{  
     font-family:arial;   
     font-size:12px;   
     font-weight:bold;   
     color:pink;   
     text-decoration:underline;   
     cursor:pointer;   
 }  
   
 /*image_add_resource*/  
 .add_resource{  
     background-image:url(img/add_resource.png);   
 }  
 .add_resource:hover{  
     background-image:url(img/add_resource_hover.png);   
 }  
 .add_resource:active{  
     background-image:url(img/add_resource_active.png);   
 }  

I also tried to dispatch the event to the childNodes, but that didn't work either, I suppose a 'hover' is not the same as 'mouseover'. So this is not working

function  mouseoverSink(){ //part of the onload() function
           var elements,i;
           elements = $.getElements("hoverdown", null, null);//function to get all elements with class "hoverdown
           for(i=0;i<elements.length;i=i+1){
               elements[i].onmouseover = function(){var cn,e;
                                                   if (document.createEvent) {
                                                        e = document.createEvent("MouseEvents");
                                                        e.initEvent("mouseover", false, false);
                                                    }
                                                    else if (document.createEventObject) {
                                                        e = document.createEventObject();
                                                    }
                                                   cn = this.childNodes
                                                   //this.style.border="1px solid blue"  - when uncommented, this verifies I'm hitting the target
                                                   for(var i=0;i<cn.length;i=i+1){
                                                       //cn[i].style.border="1px solid red" - when uncommented, this verifies I'm hitting the childNodes
                                                        if (cn[i].dispatchEvent) cn[i].dispatchEvent(e); // DOM
                                                        else if (cn[i].fireEvent) cn[i].fireEvent("mouseover", e); // IE
                                                }}
           }
} 

Having the text change when the user hovers or activates the image is OK, but sub optimal. Any further ideas appreciated.

Thanks

Marten>

[Bear Bibeault]

parent:hover img {
   whatever;
}    

will cause the image CSS to change when the parent is hovered over.

[marten kay]

thanks!

Got it, not quite as suggested because I couldn't figure out how to use the img tag for this, but my solution is below.... now I will generalize for a servlet response.

... never found selectors very interesting until now!

<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
	.parent {
	    color:green; 
	    font-family:arial; 
	    font-weight:normal; 
	    font-size:12px; 
	    min-height:25px; 
	    vertical-align:middle; 
	}
	.parent:hover {
	    color:red; 
	    cursor:pointer; 
	}
	.parent:active {
	    color:blue; 
	}
	.text_general{
	    text-decoration:underline; 
	}
	
	.parent .specific{
	    background-image:url(img/view_all.png); 
	}
	.parent:hover .specific{
	    background-image:url(img/view_all_hover.png); 
	}
	.parent:active .specific{
	    background-image:url(img/view_all_active.png); 
	}
	
	.image_general{
	    border:0; 
	    height:25px; 
	    width:25px; 
	    display:inline-block; 
	    cursor:pointer; 
	    background-position:center; 
	    background-repeat:no-repeat; 
	    vertical-align:middle; 
	}
</style>
<title>Resource Manager</title>
</head>
<body>
	<div id="14" class="parent">
		<span class="text_general">View All</span>
		<span class="image_general specific"/></span>
	</div>
</body>
</html>

[Eric Pascarello]

You could do something like this:

<style type="text/css">
    a.text_general{
        color: #CCA;
        background-image:url(img/add_resource.png);
        background-repeat: no-repeat;
	background-position: center left;
        padding-left: 15px; /*width of image plus a few pixels*/
    }
    a.text_general:hover{
        color: #A0C;
        background-image:url(img/add_resource_hover.png);
    }
    a.text_general:hover{
        color: #C0A;
        background-image:url(img/add_resource_active.png);
    }

</style>

<div id="14" class="parent">  
    <a class="text_general" href="#">View All</a>  
</div>  

Eric

[marten kay]

Thanks, that's neat.