Появление картинки при наведении на элемент

@galograff · Регистрация: 22.04.2013

Author24 — интернет-сервис помощи студентам

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
$(document).ready(function (){
$('#point_img').hide(0);
 $('#point').mouseover(function(){
    var cssD=$('#point_img').css('display');
    if(cssD=="none"){
        $('#point_img').animate( { "opacity": "show"} , 100 );
        document.getElementById('point').style.color='#fff';
        document.getElementById('block').style.fill='#f00';
    }
    else{
        $('#point_img').hide(100);
        document.getElementById('point').style.color='#000';
        document.getElementById('block').style.fill='#DADADA';
    }
    });
$('#point').mouseout(function(){
        $('#point_img').hide(100);
        document.getElementById('point').style.color='#000';
        document.getElementById('block').style.fill='#DADADA';
    });
                     
 });
 </script>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
span.point1{
    left: 120px;
    position: absolute;
    text-transform: uppercase;
    top: 240px;
    z-index: 10;
    font-size: 12px;
    line-height: 16px;
    width: 120px; 
    height: 70px;
}
span.point2{
    left: 210px;
    position: absolute;
    text-transform: uppercase;
    top: 130px;
    z-index: 10;
    font-size: 12px;
    line-height: 16px;
    width: 105px; 
    height: 90px;   
}
div.img1{
    display: none;
    height: 163px;
    width: 210px;
    position: absolute;
    top:155px;
    left: -58px;
    z-index: 1;
    background:#00f;
}
div.img2{
    display: none;
    height: 163px;
    width: 210px;
    position: absolute;
    left: 107px;
    top: -11px;
    z-index: 1;
    background:#f00;

HTML5
1
2
3
4
    <span id="point" class="point1">Текст 1</span>
    <span id="point" class="point2">Текст 2</span>
    <div id="point_img" class="img1"></div>
    <div id="point_img" class="img2"></div>

@philin · 10.12.2013, 14:00

ID должен быть уникальным по всему документу. Используйте класс

@galograff · 10.12.2013, 14:08 **[ТС]**

Сообщение от philin

ID должен быть уникальным по всему документу. Используйте класс

както так?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function (){
$('#point_img').hide(0);
 $('.point1').mouseover(function(){
    var cssD=$('#point_img').css('display');
    if(cssD=="none"){
        $('#point_img').animate( { "opacity": "show"} , 100 );
    }
    else{
        $('#point_img').hide(100);
    }
    });
$('.point1').mouseout(function(){
        $('#point_img').hide(100);
    });
                     
 });

Добавлено через 3 минуты

Сообщение от philin

ID должен быть уникальным по всему документу. Используйте класс

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(document).ready(function (){
$('.img1').hide(0);
 $('.point1').mouseover(function(){
    var cssD=$('.img1').css('display');
    if(cssD=="none"){
        $('.img1').animate( { "opacity": "show"} , 100 );
    }
    else{
        $('.img1').hide(100);
    }
    });
$('.point1').mouseout(function(){
        $('.img1').hide(100);
    });
                     
 });
$(document).ready(function (){
$('.img2').hide(0);
 $('.point2').mouseover(function(){
    var cssD=$('.img2').css('display');
    if(cssD=="none"){
        $('.img2').animate( { "opacity": "show"} , 100 );
    }
    else{
        $('.img2').hide(100);
    }
    });
$('.point2').mouseout(function(){
        $('.img2').hide(100);
    });
                     
 });

у меня 8 элементов, мне бы как-то унифицировать код

@philin · 10.12.2013, 14:17

Вы спутали ID и класс. Класс можно присваивать множеству элементов, ID - только одному

HTML5
1
2
3
4
<span id="point1" class="point">Текст 1</span>
<span id="point2" class="point">Текст 2</span>
<div id="point_img1" class="img"></div>
<div id="point_img2" class="img"></div>

Тут селекторы вида $("#point1") для поиска конкретного элемента и $(".point") для всех, имеющих класс "point". Обработчик события для класса и будет универсальным

@galograff · 10.12.2013, 14:29 **[ТС]**

Сообщение от philin

Вы спутали ID и класс. Класс можно присваивать множеству элементов, ID - только одному

HTML5
1
2
3
4
<span id="point1" class="point">Текст 1</span>
<span id="point2" class="point">Текст 2</span>
<div id="point_img1" class="img"></div>
<div id="point_img2" class="img"></div>

Тут селекторы вида $("#point1") для поиска конкретного элемента и $(".point") для всех, имеющих класс "point". Обработчик события для класса и будет универсальным

а не получиться так что при наведении на один point откроются все Img?

Добавлено через 2 минуты

@philin · 10.12.2013, 14:30

Нет, если в обработчике использовать не общий селектор, а this - указатель на элемент, с которым произошло событие. $(this) для jQuery-скриптов.

Между прочим... а почему картинку не вложить в point и не переложить работу на CSS?

@galograff · 10.12.2013, 14:33 **[ТС]**

Сообщение от philin

Нет, если в обработчике использовать не общий селектор, а this - указатель на элемент, с которым произошло событие. $(this) для jQuery-скриптов

куда правильно будет поставить $(this)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function (){
$('.img').hide(0);
 $('.point').mouseover(function(){
    var pos=$('.img').css('display');
    if(pos=="none"){
        $('.img').animate( { "opacity": "show"} , 100 );
    }
    else{
        $('.img').hide(100);
    }
    });
$('.point').mouseout(function(){
        $('.img').hide(100);
    });
                     
 });

@philin · 10.12.2013, 14:40

Повторюсь, я бы вложил картинки внутрь point и просто добавил бы правило

CSS
1
.point:hover img {display:block}

Если все же с JS, то в подобных случаях удобно использовать атрибут data-*

HTML5
1
2
3
4
5
6
<span data-id="1">1</span>
<span data-id="2">2</span>
<span data-id="3">3</span>
<div data-id="1">photo1</div>
<div data-id="2">photo2</div>
<div data-id="3">photo2</div>

JavaScript
1
2
3
$("span").mouseover(function(){
    $("div[data-id="+this.dataset.id+"]").show(); // или $(this).data("id")
})

@galograff · 10.12.2013, 14:50 **[ТС]**

Сообщение от philin

Повторюсь, я бы вложил картинки внутрь point и просто добавил бы правило

CSS
1
.point:hover img {display:block}

Если все же с JS, то в подобных случаях удобно использовать атрибут data-*

HTML5
1
2
3
4
5
6
<span data-id="1">1</span>
<span data-id="2">2</span>
<span data-id="3">3</span>
<div data-id="1">photo1</div>
<div data-id="2">photo2</div>
<div data-id="3">photo2</div>

JavaScript
1
2
3
$("span").mouseover(function(){
    $("div[data-id="+this.dataset.id+"]").show(); // или $(this).data("id")
})

спасибо. просветили. сделал по своему. работает)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function (){
$('.img').hide(0);
 $('span').mouseover(function(){
    var pos=$("div[data-id="+this.dataset.id+"]").css('display');
    if(pos=="none"){
         $("div[data-id="+this.dataset.id+"]").animate( { "opacity": "show"} , 100 );
    }
    else{
        $("div[data-id="+this.dataset.id+"]").hide(100);
    }
    });
$('span').mouseout(function(){
        $("div[data-id="+this.dataset.id+"]").hide(100);
    });
                     
 });

HTML5
1
2
3
4
    <span id="point1" data-id="1" class="point">Текст 1</span>
    <span id="point2" data-id="2" class="point">Текст 2</span>
    <div id="img1" data-id="1" class="img"></div>
    <div id="img2" data-id="2" class="img"></div>

@philin · 10.12.2013, 15:02

Хех) Теперь причесать
Теперь ID не нужны.
Селектор $("span") заберет все span в документе - я же для упрощенного образца это написал. А тут нужен класс - $(".point")
И зачем $(".img").hide()? Лучше CSS-свойством прописать для класса display:none
Честно говоря, не понял финта с pos. При наведении - показать, при покидании - скрыть. просто hide(100) и show(100), jQuery сам работает с display. Или предполагалось при наведении уж точно скрыть все остальные?

@galograff · 10.12.2013, 15:09 **[ТС]**

Сообщение от philin

Хех) Теперь причесать
Теперь ID не нужны.
Селектор $("span") заберет все span в документе - я же для упрощенного образца это написал. А тут нужен класс - $(".point")
И зачем $(".img").hide()? Лучше CSS-свойством прописать для класса display:none
Честно говоря, не понял финта с pos. При наведении - показать, при покидании - скрыть. просто hide(100) и show(100), jQuery сам работает с display. Или предполагалось при наведении уж точно скрыть все остальные?

id нужны надо кудато писать css

CSS
1
2
3
4
5
6
7
8
9
10
11
span#point1{
    left: 120px;
    position: absolute;
    text-transform: uppercase;
    top: 240px;
    z-index: 10;
    font-size: 12px;
    line-height: 16px;
    width: 120px; 
    height: 70px;
}

осталось только

JavaScript
1
2
        document.getElementById('point').style.color='#fff';
        document.getElementById('block').style.fill='#f00';

превратить в божеский вид

@philin · 10.12.2013, 15:17

ID вообще уже не используются (по крайней мере, в показанной части). Это же указатель на конкретный элемент, а не группу

CSS
1
2
.point {} /* стиль общий для всех .point. И span уже не обязательно
указывать, если нет других элементов с таким же классом */

document.getElementById('point').style.c olor='#fff'; - это что? Общий цвет или при каком-то событии? Если общий, то лучше засунуть в CSS-класс .point. Если при событии - есть в CSS и псевдоклассы типа :hover. Вид, кстати, вполне божеский для чистого JS. Если jQuery, то $("#point").css("color", "#fff"); Но это, как обычно, медленнее "чистого"

@galograff · 10.12.2013, 15:19 **[ТС]**

document.getElementById('point').style.c olor='#fff'; - это что?

-цвет при наведении

document.getElementById('block').style.f ill='#f00';

- это заливка сектора
http://jsfiddle.net/TSA35/4/

@philin · 10.12.2013, 15:33

CSS-классы для того и есть, чтобы общие свойства для группы элементов хранить в одном месте, а не копировать для каждого. Например, #point1 и #point2. Куча же общих свойств. Так и давайте вынесем в один класс

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.point {
    position: absolute;
    text-transform: uppercase;
    z-index: 10;
    font-size: 12px;
    line-height: 16px;
}
#point1{
    left: 120px;
    top: 240px;
    width: 120px; 
    height: 70px;
}
#point2{
    left: 210px;
    top: 130px;
    width: 105px; 
    height: 90px;   
}

От ID все равно можно отказаться, взяв CSS-псевдоклассы. nth-child позволяет работать с пронумерованными найденными элементами

CSS
1
2
.point:nth-child(1) {} /* первый найденный .point */
.point:nth-child(2) {} /* второй найденный .point */

Тогда

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.point {
    position: absolute;
    text-transform: uppercase;
    z-index: 10;
    font-size: 12px;
    line-height: 16px;
}
.point:nth-child(1){
    left: 120px;
    top: 240px;
    width: 120px; 
    height: 70px;
}
.point:nth-child(2){
    left: 210px;
    top: 130px;
    width: 105px; 
    height: 90px;   
}

И в HTML можно вообще убрать ID. С CSS мы просто считаем span.point и по номеру выдаем нужные свойства

@galograff · 10.12.2013, 15:33 **[ТС]**

Сообщение от philin

ID вообще уже не используются (по крайней мере, в показанной части). Это же указатель на конкретный элемент, а не группу

CSS
1
2
.point {} /* стиль общий для всех .point. И span уже не обязательно
указывать, если нет других элементов с таким же классом */

document.getElementById('point').style.c olor='#fff'; - это что? Общий цвет или при каком-то событии? Если общий, то лучше засунуть в CSS-класс .point. Если при событии - есть в CSS и псевдоклассы типа :hover. Вид, кстати, вполне божеский для чистого JS. Если jQuery, то $("#point").css("color", "#fff"); Но это, как обычно, медленнее "чистого"

data-id="1" - Это волшебная вещь) все сделал. готов отблагодарить. через киви

Новые блоги и статьи Все статьи Все блоги /
Реализация Domain-Driven Design с Java Javaican 20.05.2025 DDD — это настоящий спасательный круг для проектов со сложной бизнес-логикой. Подход, предложенный Эриком Эвансом, позволяет создавать элегантные решения, которые точно отражают реальную предметную. . .	Возможности и нововведения C# 14 stackOverflow 20.05.2025 Выход версии C# 14, который ожидается вместе с . NET 10, приносит ряд интересных нововведений, действительно упрощающих жизнь разработчиков. Вы уже хотите опробовать эти новшества? Не проблема! Просто. . .	Собеседование по Node.js - вопросы и ответы Reangularity 20.05.2025 Каждому разработчику рано или поздно приходится сталкиватся с техническими собеседованиями - этим стрессовым испытанием, где решается судьба карьерного роста и зарплатных ожиданий. В этой статье я. . .	Cython и C (СИ) расширения Python для максимальной производительности py-thonny 20.05.2025 Python невероятно дружелюбен к начинающим и одновременно мощный для профи. Но стоит лишь заикнуться о высокопроизводительных вычислениях — и энтузиазм быстро улетучивается. Да, Питон медлительнее. . .	Безопасное программирование в Java и предотвращение уязвимостей (SQL-инъекции, XSS и др.) Javaican 19.05.2025 Самые распространёные векторы атак на Java-приложения за последний год выглядят как классический "топ-3 хакерских фаворитов": SQL-инъекции (31%), межсайтовый скриптинг или XSS (28%) и CSRF-атаки. . .
Введение в Q# - язык квантовых вычислений от Microsoft EggHead 19.05.2025 Microsoft вошла в гонку технологических гигантов с собственным языком программирования Q#, специально созданным для разработки квантовых алгоритмов. Но прежде чем погружаться в синтаксические дебри. . .	Безопасность Kubernetes с Falco и обнаружение вторжений Mr. Docker 18.05.2025 Переход организаций к микросервисной архитектуре и контейнерным технологиям сопровождается лавинообразным ростом векторов атак — от тривиальных попыток взлома до многоступенчатых кибератак, способных. . .	Аугментация изображений с Python AI_Generated 18.05.2025 Собрать достаточно большой датасет для обучения нейронной сети — та ещё головная боль. Часами вручную размечать картинки, скармливать их ненасытным алгоритмам и молиться, чтобы модель не сдулась при. . .	Исключения в Java: советы, примеры кода и многое другое Javaican 18.05.2025 Исключения — это объекты, созданные когда программа сталкивается с непредвиденной ситуацией: файл не найден, сетевое соединение разорвано, деление на ноль. . . Список можно продолжать до бесконечности. . . .	Как сделать SSO (Single Sign-On) в C# приложении stackOverflow 18.05.2025 SSO — это механизм, позволяющий пользователю пройти аутентификацию один раз и получить доступ к нескольким приложениям без повторного ввода учетных данных. Вы наверняка сталкивались с ним, когда. . .

@philin Иллюзионист 154 / 153 / 27 Регистрация: 02.10.2013 Сообщений: 330
	10.12.2013, 14:00
	ID должен быть уникальным по всему документу. Используйте класс 1

@philin Иллюзионист 154 / 153 / 27 Регистрация: 02.10.2013 Сообщений: 330
	10.12.2013, 14:30
	Нет, если в обработчике использовать не общий селектор, а this - указатель на элемент, с которым произошло событие. $(this) для jQuery-скриптов. Между прочим... а почему картинку не вложить в point и не переложить работу на CSS? 0

@philin Иллюзионист 154 / 153 / 27 Регистрация: 02.10.2013 Сообщений: 330
	10.12.2013, 15:02
	Хех) Теперь причесать Теперь ID не нужны. Селектор $("span") заберет все span в документе - я же для упрощенного образца это написал. А тут нужен класс - $(".point") И зачем $(".img").hide()? Лучше CSS-свойством прописать для класса display:none Честно говоря, не понял финта с pos. При наведении - показать, при покидании - скрыть. просто hide(100) и show(100), jQuery сам работает с display. Или предполагалось при наведении уж точно скрыть все остальные? 1