Question

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

我认为可以用jquery完成，但可以在纯CSS中完成，或者你有一个示例或代码我可以将我的想法建立在

上

感谢

Answer 1

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

邻近

<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();
            }
        );
    }
);

我很好奇为什么你想采用这种方法，似乎你想要将鼠标悬停在任一项目（在这种情况下为'thumbnail'和'fullsize'）以显示另一项？这意味着这些项目中的一个或两个同时将是不可见/隐藏的。在这种情况下，用户如何知道他们存在以进行交互？

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的顺序与他们的对应fullsize元素（或反之亦然），因为它是基于他们的指数位置。

Answer 2

所以在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，你可以在rollover上添加一个类

$(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或使用不同的类，菜单和图像显然可能不同。

Answer 3

假设您可以在图像上使用绝对定位，则可以在不使用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 个答案:

邻近

后代

演示：在JS Bin。

HTML：