Mouse over text adds border to several images, but when mouse over images there should be no effect

Question

I have some text on a page, when someone mouses over it, it will highlight (using outline) several selected images on the same page. I want this to be one way, so mousing over the text highlights the images, but I want mousing over the images to have no effect, right now it also highlights everything. Is this possible? Note: each image has an id and a class (jquery draggable) already attached to it.

HTML:

<div class="container">
    <div class="containerLeft">alignments</div>
    <div><img src="http://www.cool-smileys.com/images/out11.jpg" id="position7" class="ui-widget-content" /></div>
    <div><img src="http://www.cool-smileys.com/images/out12.jpg" id="position8" class="ui-widget-content" /></div>
    <div><img src="http://www.cool-smileys.com/images/out13.jpg" id="position9" class="ui-widget-content" /></div>
    <div> <img src="http://www.cool-smileys.com/images/out14.jpg" id="position12" class="ui-widget-content" /> </div>
</div>

CSS:

/* Normal Styles */
.containerLeft {
    color:#333;
    width:100px;
}

.containerLeft:hover {
    width:100px;
}


/* Hover Styles */
.container:hover .containerLeft {
    background-color: none;
}


.container:hover #position12 {
    outline:2px solid #CFF;
}

.container:hover #position7 {
    outline:2px solid #CFF;
}

.container:hover #position8 {
    outline:2px solid #CFF;     
}

.container:hover #position9 {
    outline:2px solid #CFF;
}


  #position7{ 
 position:absolute;
 margin: 0;
     padding: 0;
     border:none;
     left: 13em;
    top:9em;
    z-index:17;
 }

   #position8{ 
 position:absolute;
 margin: 0;
     padding: 0;
     border:none;
     left: 4em;
    top:15em;
    z-index:2;
 }


    #position9{ 
 position:absolute;
 margin: 0;
     padding: 0;
     border:none;
     left: 7em;
    top:5em;
    z-index:20;
 }

 #position12{ 
 position:absolute;
 margin: 0;
     padding: 0;
     border:none;
     left: 24em;
    top:10em;
    z-index:-14;
 }

Right now everything is in css, but maybe there is a javascript solution?

The jsfiddle: http://jsfiddle.net/tMzMN/8/

Answer 1

If you want to use JS/Jquery you could achieve what you want this way:

$(".containerLeft").hover(function() {
    $(".ui-widget-content").addClass("hover_class");
}, function() {
    $(".ui-widget-content").removeClass("hover_class")
});

Then just replace all 4 of your CSS selectors that look like this:

.container:hover #position9 {
    outline:2px solid #CFF;
}
...

with this:

.hover_class {
    outline:2px solid #CFF;
}

Here is a fiddle of it in action: http://jsfiddle.net/tMzMN/9/

Also, and don't quote me on this, using the Jquery method above will probably have a greater level of backwards compatibility with older browsers as opposed to any CSS tricks you find. I could be wrong and there may very well be something that plays nice with IE<9 but I'm not sure...