将鼠标悬停在文本上会为多个图像添加边框，但是当鼠标悬停在图像上时应该没有效果答案

【问题标题】：Mouse over text adds border to several images, but when mouse over images there should be no effect将鼠标悬停在文本上会为多个图像添加边框，但是当鼠标悬停在图像上时应该没有效果
【发布时间】：2013-08-24 12:13:30
【问题描述】：

我的页面上有一些文本，当有人将鼠标悬停在它上面时，它将突出显示（使用轮廓）同一页面上的几个选定图像。我希望这是一种方式，因此将鼠标悬停在文本上会突出显示图像，但我希望将鼠标悬停在图像上没有效果，现在它也会突出显示所有内容。这可能吗？注意：每个图像都有一个 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/

【问题讨论】：

标签： css hover mouseover outline

【解决方案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/

另外，不要引用我的话，与您发现的任何 CSS 技巧相比，使用上面的 Jquery 方法可能会与旧浏览器具有更高水平的向后兼容性。我可能是错的，很可能有一些东西很适合 IE

【讨论】：