0

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

4

1 回答 1

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<9 配合得很好的东西，但我不确定......

于 2013-08-21T23:11:09.743 回答