multi hover highlight

Question

I have a idea, a way to give user feedback i like to hover on a menu, that will highlight an img correcponding to the menu OR theinverse, hover over image will highlight the menu

I think it can be done with jquery, but can it be done in pure css or do you have a example or code i can base my idea on

thanks

Answer 1

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.

Answer 2

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.

Answer 3

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&amp;d=identicon&amp;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&amp;d=identicon&amp;r=PG" /></a></li>
    </ul>
    <div class="clear"></div>
</div>
</body>
</html>