многократное выделение при наведении курсора - PullRequest
Новая
       0

многократное выделение при наведении курсора

0 голосов
/ 04 октября 2010

У меня есть идея, способ дать обратную связь с пользователем Мне нравится зависать в меню, которое выделит IMG, соответствующее меню ИЛИ наоборот, при наведении курсора на изображение будет выделено меню

Я думаю, что это можно сделать с помощью jquery, но можно ли это сделать в чистом CSS или у вас есть пример или код, который я могу основать на своей идее

спасибо

Ответы [ 3 ]

0 голосов
/ 04 октября 2010

Так что в 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" />

Сначала вам нужно что-то связать, например, ссылку на класс или ссылку 

<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') Класс highlight будет содержать стили для вашего ролловера, которые, очевидно, могут отличаться для меню и изображения либо с li .hightlight и img .highlight, либо с использованием разных классов.

0 голосов
/ 04 октября 2010

Предполагая, что вы можете использовать абсолютное позиционирование на изображении, вы можете сделать это без Javascript. Просто вложите img внутри элемента (предположительно, якорь, в противном случае он не будет работать в IE6), разместите его абсолютно (используйте идентификаторы в различных пунктах меню, чтобы расположить изображения по-разному) и добавьте стиль наведения на якорь. Действие hover будет работать как для абсолютно позиционированного 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>
0 голосов
/ 04 октября 2010

Пока изображение, которое вы хотите выделить, является родным братом или потомком элемента, над которым вы наводите курсор, это можно сделать относительно легко.

Siblings 

<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 (или наоборот), так как они основаны на их индексных позициях.

...