将鼠标悬停在文字上可以为多张图片添加边框，但是当鼠标悬停在图片上时应该没有任何效果

Question

我在页面上放置了一些文字，当有人将其放置在它上面时，它会在同一页上突出显示（使用轮廓） 。我希望这是一种方式，因此将文字悬停在图像上会突出显示图像，但我希望将图像放在图像上无效，现在它也会突出显示所有内容。这可能吗？注意：每个图像都有一个id和一个已经附加到它的类（jQuery可拖动）。

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，但也许有一个JavaScript的解决方案吗？

的的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") 
}); 

然后，只需更换你的CSS选择器看起来像这样的所有4个：

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

与此：

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

这里是它在行动小提琴：http://jsfiddle.net/tMzMN/9/

此外，不要引用我这一点，使用上述方法的Jquery将可能有向后兼容性与旧版浏览器的更高水平的，而不是任何CSS你找到的技巧。我可能是错的，有可能是非常好的东西，与IE < 9，但我不确定...