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

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

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

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

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" - Это волшебная вещь) все сделал. готов отблагодарить. через киви

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@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