Question

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

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

用这个：

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

以下是其中的一个小提琴：http://jsfiddle.net/tMzMN/9/

另外，并且不要引用我这一点，使用上面的Jquery方法可能会比旧版浏览器具有更高级别的向后兼容性，而不是您找到的任何CSS技巧。我可能是错的，很可能会有一些与IE＆lt; 9相关的东西，但我不确定......

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

1 个答案: