当前位置：文江博客话题详情

多悬停突出显示

发布于 2024-09-25 19:55:38 字数 152 浏览 3 评论 0原文

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

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彼岸花似海 2024-10-02 19:55:38

因此，据我所知，在 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 或使用不同的类的菜单和图像来说，这些样式显然可能不同。

So in jQuery as far as I understand you have a menu and some images:

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

...

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

First you need something to link the two, such as a class or rel reference

<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" />

Then using jQuery you could add a class to the elements on 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');
    });
});

You could use anything really as an indentifyer using .text() or .atrr('src')
The highlight class would contain the styles for your rollover, which could obviously be different for the menu and image either with li .hightlight and img .highlight or using different classes.

回复收藏 0 原文

通知家属抬走 2024-10-02 19:55:38

假设您可以在图像上使用绝对定位，则无需 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>

Assuming you can use absolute positioning on the image, you can do this without Javascript. Just nest the img inside the element (presumably an anchor, otherwise won't work in IE6), position it absolutely (use IDs on the various menu items to position the images differently) and add a hover style to the anchor. The hover action will work for both the absolutely positioned img and the containing a element.

Here is a very simple example:

<!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>

回复收藏 0 原文

国产ˉ祖宗 2024-10-02 19:55:38

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

Siblings

<div>

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

</div>

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

Descendants

<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' 有点不同，因为它不需要明确的关系，但它确实要求缩略图与其对应的fullsize元素的顺序相同（或反之亦然），因为它是基于他们的指数位置。

As long as the image you want to highlight is sibling or descendant of the item you're hovering over, it can be done relatively easily.

Siblings

<div>

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

</div>

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

Descendants

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

For the reverse (to hover over the image to show the menu) isn't possible with CSS, since the cascade is one-way. It's relatively easy to implement with JavaScript though, but I can only offer jQuery (to my shame):

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

I am curious as to why you want to take this approach, it seems that you want to hover over either item (in this case 'thumbnail' and 'fullsize') to show the other? This implies that one, or both, of these items will at the same time be invisible/hidden. This being the case how does the user know they exist for interaction to take place?

Demo at JS Bin (based on siblings).

Here's an alternative, for an 'anywhere on the page' relationship between the two:

Demo: at 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');
      }
    );
  }
);

It's a little different to @BenWells', in that it doesn't require an explicit relationship, but it does require that the thumbnails be in the same order as their counterpart fullsize elements (or vice/versa) since it's based on their index positions.

回复收藏 0 原文

~没有更多了~

关于作者

栩栩如生

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

多悬停突出显示

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

Siblings

Descendants

演示：位于 JS Bin。

html：

Siblings

Descendants

Demo: at JS Bin.

html:

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

多悬停突出显示

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

Siblings

Descendants

演示：位于 JS Bin。

html：

Siblings

Descendants

Demo: at JS Bin.

html:

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。