多悬停高亮答案

【问题标题】：multi hover highlight多悬停高亮
【发布时间】：2010-10-04 19:57:15
【问题描述】：

我有一个想法，一种向用户提供反馈的方法我喜欢将鼠标悬停在菜单上，这将突出显示与菜单相对应的 img 或者相反，将鼠标悬停在图像上会突出显示菜单

我认为它可以用 jquery 完成，但它可以用纯 css 完成还是你有一个示例或代码我可以基于我的想法

谢谢

【问题讨论】：

【解决方案1】：

所以在 jQuery 中，据我了解，您有一个菜单和一些图片：

<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
</ul>

...

<img src="/img1.jpg" />
<img src="/img2.jpg" />

首先你需要一些东西来链接这两者，例如类或 rel 引用

<ul>
<li><a href="#" rel="img1">item 1</a></li>
<li><a href="#" rel="img2">item 2</a></li>
</ul>

...

<img src="/img1.jpg" id="img1" />
<img src="/img2.jpg" id="img2" />

然后使用 jQuery，您可以在翻转时向元素添加一个类

$(function(){
    $('li a').bind('mouseenter mouseleave',function(e){
        $(this).toggleClass('highlight');
        $('#'+$(this).attr('rel')).toggleClass('highlight');
    });
    $('img[id^=img]').bind('mouseenter mouseleave',function(e){
        $(this).toggleClass('highlight');
        $('a[rel='+$(this).attr('id')+']').toggleClass('highlight');
    });
});

您可以使用 .text() 或 .atrr('src') 将任何东西真正用作标识符高亮类将包含您的翻转样式，对于菜单和图像，使用 li .hightlight 和 img .highlight 或使用不同的类显然会有所不同。

【讨论】：

【解决方案2】：

假设您可以在图像上使用绝对定位，您可以在没有 Javascript 的情况下执行此操作。只需将img 嵌套在元素内（可能是锚点，否则在 IE6 中不起作用），绝对定位它（使用各种菜单项上的 ID 以不同方式定位图像）并向锚点添加悬停样式。悬停动作适用于绝对定位的 img 和包含的 a 元素。

这是一个非常简单的例子：

<!DOCTYPE html>
<html>
<head>
<style>
#container {
    margin: 10px auto;
    padding: 0;
    position: relative;
    width: 960px;
}
#menu {
    list-style: none;
    margin: 0px;
    padding: 100px 0px; /* simulate header area */
}
#menu a {
    border: 1px solid #fff;
    float: left;
}
#menu a:hover,
#menu a:hover img {
    border: 1px solid #f00;
}
#menu img {
    border: 1px solid #fff;
    position: absolute;
    top: 0px;
}
#test1 img {
    left: 0px;
}
#test2 img {
    left: 40px;
}
.clear {
    clear: left;
}
</style>
</head>
<body>
<div id="container">
    <ul id="menu">
        <li><a href="#" id="test1">here is some menu text <img src="http://www.gravatar.com/avatar/9565672b231ef0e90d5a625699f2eafc?s=32&d=identicon&r=PG" /></a></li>
        <li><a href="#" id="test2">here is some more menu text <img src="http://www.gravatar.com/avatar/9565672b231ef0e90d5a625699f2eafc?s=32&d=identicon&r=PG" /></a></li>
    </ul>
    <div class="clear"></div>
</div>
</body>
</html>

【讨论】：

【解决方案3】：

只要您要突出显示的图像是您悬停的项目的兄弟或后代，就可以相对容易地完成。

兄弟姐妹

<div>

<img class="thumbnail" src="path/to/thumb.png" />
<img class="fullSize" src="path/to/Full.png" />

</div>

.thumbnail:hover + .fullsize {
display: block;
}

后代

<ul>
<li><img class="thumbnail" src="path/to/thumb.png" />
        <ul>
                <li class="fullsize"><img src="path/to/full.png" /></li>
                <li class="desc">Description text for above image</li>
        </ul>
</li>
</ul>

.thumbnail .fullsize,
.thumbnail .desc {
        display: block;
}

反之（将鼠标悬停在图像上以显示菜单）无法使用 CSS，因为级联是单向的。虽然用 JavaScript 实现起来相对容易，但我只能提供 jQuery（真可惜）：

$(document).ready(
    function(){
        $('.fullsize.').hover(
            function() {
                $(this).closest('.thumbnail').show();
            }
        );
    }
);

我很好奇为什么您想采用这种方法，似乎您想将鼠标悬停在任一项目（在本例中为“缩略图”和“全尺寸”）以显示另一个？这意味着这些项目中的一个或两个将同时不可见/隐藏。在这种情况下，用户如何知道它们的存在是为了进行交互？

JS Bin 的演示（基于兄弟姐妹）。

对于两者之间的“页面上的任何位置”关系，这是另一种选择：

演示：JS Bin。

html:

$(document).ready(
  function(){
    $('.fullsize, .thumbnail').mouseover(
      function() {
        var currId = $('.fullsize').index();
        if ($(this).hasClass('thumbnail')) {
          var toShow = '.fullsize';
        }
        else {
          var toShow = '.thumbnail';
        }

        $(toShow).eq(currId).addClass('show');
      }
    );
    $('.fullsize, .thumbnail').mouseout(
      function() {
        var currId = $('.fullsize').index();
        if ($(this).hasClass('thumbnail')) {
          var toShow = '.fullsize';
        }
        else {
          var toShow = '.thumbnail';
        }

        $(toShow).eq(currId).removeClass('show');
      }
    );
  }
);

它与 @BenWells' 有点不同，因为它不需要明确的关系，但它确实要求 thumbnails 与其对应的 @987654329 的顺序相同@ 元素（反之亦然），因为它基于它们的索引位置。

【讨论】：