Мышь над текстом добавляет границу нескольким изображениям, но когда мышь над изображениями не должна быть эффекта

Question

У меня есть текст на странице, когда кто-то его обманывает, он выделяет (используя контур) несколько выбранных изображений на той же странице , Я хочу, чтобы это было одним из способов, поэтому мышь над текстом выделяет изображения, но я хочу, чтобы мышь над изображениями не имела никакого эффекта, прямо сейчас она также выделяет все. Это возможно? Примечание. Каждое изображение имеет идентификатор и класс (jquery draggable), уже прикрепленный к нему.

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

Сейчас все в CSS, но может быть, есть Java-решение?

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

Answer 1

Если вы хотите использовать JS/Jquery вы можете добиться того, что вы хотите таким образом:

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

Тогда просто заменить все 4 ваших CSS селекторов, которые выглядят следующим образом:

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

с этим:

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

Вот скрипка его в действии: http://jsfiddle.net/tMzMN/9/

Кроме того, и не цитируйте меня на этом, используя метод Jquery выше, вероятно, имеет более высокий уровень обратной совместимости со старыми браузерами, в отличие от любого CSS трюки, которые вы найдете. Я мог ошибаться, и может быть очень хорошо, что играет с IE < 9, но я не уверен ...