Перестал работать hover после события click

@a4t_ech · Регистрация: 10.08.2015

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

Друзья, помогите разобраться с возникшей проблемой!
1. Есть 9 картинок-ссылок, первой из которых по умолчанию задан класс active(синяя рамка) - рисунок 1;
2. При наведении на любую из картинок ссылок появляется затемнение с иконкой лупы и синяя рамка, при этом выбранная остается с синей рамкой - рисунок 2;
3. При нажатии на наведенную картинку большая меняется и становится как маленькая, при этом за ней закрепляется синяя рамка, а с выбранной до этого рамка убирается - рисунок 3;
4. При наведении на другую картинку у нее должна появляться синяя рамка и затемнение с иконкой лупы.

Проблема в том, что 4 пункт выполняется, но без рамки - рисунок 4.

И еще...может кто то посоветует как уменьшить js код?

Спасибо!

@a4t_ech · 14.08.2016, 19:02 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<p class="thumbs left">
        <a href="#" class="active hitman" title="Хитмен-агент"><img  src="images/thumbs/hitman-thumb.jpg" alt="Хитмен-агент"></a>
        <a href="#"  class="tenths" title="Девять десятых"><img src="images/thumbs/9tenths-thumb.jpg" alt="Девять десятых"></a>
        <a href="#" class="gravity" title="Притяжение"><img src="images/thumbs/prityazhenie_thumb.jpg" alt="Притяжение"></a>
    </p>
    <p class="thumbs left">
        <a href="#" class="minutes22" title="22 минуты"><img src="images/thumbs/22-minutes_thumb.jpg" alt="22 минуты"></a>
        <a href="#" class="courier" title="Курьер из рая"><img src="images/thumbs/kurier-thumb.jpg" alt="Курьер из рая"></a>
        <a href="#" class="unity" title="Единство"><img src="images/thumbs/unity-thumb.jpg" alt="Единство"></a>
    </p>
    <p class="thumbs left">
        <a href="#" class="sound" title="Звуки музыки"><img src="images/thumbs/sound-of-music_thumb.jpg" alt="Звуки музыки"></a>
        <a href="#" class="star-dust" title="Звездная пыль"><img src="images/thumbs/star-dust-thumb.jpg" alt="Звездная пыль"></a>
        <a href="#" class="blast" title="Разрушение Вегаса"><img src="images/thumbs/blast-vegas_thumb.jpg" alt="Разрушение Вегаса"></a>
 
    </p>
    <p id="img-container"><img src="images/hitman.jpg" alt="Hitman" id="largeImg"></p>

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
42
43
44
45
46
47
.thumbs{
    width: 155px;
    margin: 0 20px 0 0;
    
    a{
        border: 3px solid #fff;
        box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.5);
        margin-bottom: 10px;
        height: 200px;
        width: 145px;
        display: block;
        position: relative;
        overflow: hidden;
        
        &:after{
            content: url(../images/zoomin.png);
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            padding-top: 200px/2-32px/2;
            padding-left: 151px/2-32px/2;
            opacity: 0;
            transition:  all .5s ease-in-out;
        }
        &:hover:after{
            opacity: 1;
            background: fade(#000, 60%);
            
        }
        &.active{
            border: 3px solid blue;
        }
        &:hover{
            border: 3px solid blue;
        }
    }//a
}//thumbs
 
#img-container{
    img{
        border: 3px solid #fff;
        box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.5);
    }
    
}

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
$(document).ready(function(){
    
    $('.hitman').click(function(){
        //убираю рамку у всех ссылок кроме этой
        $('.thumbs a:not(this)').css('border', '3px solid #fff'); 
        //добавляю ссылке синию рамку при нажатии
        $(this).css('border', '3px solid blue');
        //меняю путь к большой картинке, чтоб совпадала маленькая и большая 
        $('#largeImg').attr('src', 'images/hitman.jpg');
    });
    
    $('.tenths').click(function(){
        $('.thumbs a:not(this)').css('border', '3px solid #fff');
        $(this).css('border', '3px solid blue');
        $('#largeImg').attr('src', 'images/9tenths.jpg');
    });
    
    $('.gravity').click(function(){
        $('.thumbs a:not(this)').css('border', '3px solid #fff');
        $(this).css('border', '3px solid blue');
        $('#largeImg').attr('src', 'images/prityazhenie.jpg');
    });
    
    $('.minutes22').click(function(){
        $('.thumbs a:not(this)').css('border', '3px solid #fff');
        $(this).css('border', '3px solid blue');
        $('#largeImg').attr('src', 'images/22-minutes.jpg');
    });
    
    $('.courier').click(function(){
        $('.thumbs a:not(this)').css('border', '3px solid #fff');
        $(this).css('border', '3px solid blue');
        $('#largeImg').attr('src', 'images/kurier.jpg');
    });
    
    $('.unity').click(function(){
        $('.thumbs a:not(this)').css('border', '3px solid #fff');
        $(this).css('border', '3px solid blue');
        $('#largeImg').attr('src', 'images/unity.jpg');
    });
    
    $('.sound').click(function(){
        $('.thumbs a:not(this)').css('border', '3px solid #fff');
        $(this).css('border', '3px solid blue');
        $('#largeImg').attr('src', 'images/sound-of-music.jpg');
    });
    
    $('.star-dust').click(function(){
        $('.thumbs a:not(this)').css('border', '3px solid #fff');
        $(this).css('border', '3px solid blue');
        $('#largeImg').attr('src', 'images/star-dust.jpg');
    });
    
    $('.blast').click(function(){
        $('.thumbs a:not(this)').css('border', '3px solid #fff');
        $(this).css('border', '3px solid blue');
        $('#largeImg').attr('src', 'images/blast-vegas.jpg');
    });
    
});

@boilzzz · 15.08.2016, 00:32

песочница

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
42
43
44
45
46
47
.thumbs{
    width: 155px;
    margin: 0 20px 0 0;
    
    a{
        border: 3px solid #fff;
        box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.5);
        margin-bottom: 10px;
        height: 200px;
        width: 145px;
        display: block;
        position: relative;
        overflow: hidden;
        
        &:after{
            content: url(../images/zoomin.png);
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            padding-top: 200px/2-32px/2;
            padding-left: 151px/2-32px/2;
            opacity: 0;
            transition:  all .5s ease-in-out;
        }
        &:hover:after{
            opacity: 1;
            background: fade(#000, 60%);
            
        }
        &.active{
            border: 3px solid blue;
        }
        &:hover{
            border: 3px solid blue !important;
        }
    }//a
}//thumbs
 
#img-container{
    img{
        border: 3px solid #fff;
        box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.5);
    }
    
}

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function() {
 
$('.thumbs a').click(function(event){
    $('.thumbs a:not(this)').css('border', '3px solid #fff'); 
    $(event.target).css('border', '3px solid blue');
    $('#img-container').html('<img src="'+$(event.target).attr('id')+' alt="Hitman" id="largeImg">');
});
});

HTML5
1
2
3
4
5
6
7
<p class="thumbs left">
        <a href="#" id="123" class="active hitman" title="Хитмен-агент"><img  src="https://www.cyberforum.ru/images/thumbs/hitman-thumb.jpg" alt="Хитмен-агент"></a>
        <a href="#" id="123" class="tenths" title="Девять десятых"><img src="https://www.cyberforum.ru/images/thumbs/9tenths-thumb.jpg" alt="Девять десятых"></a>
        <a href="#" id="123" class="gravity" title="Притяжение"><img src="https://www.cyberforum.ru/images/thumbs/prityazhenie_thumb.jpg" alt="Притяжение"></a>
    </p>
  
    <p id="img-container"><img src="https://www.cyberforum.ru/images/hitman.jpg" alt="Hitman" id="largeImg"></p>

В ID у сслки указываете путь, должно все работать)

@a4t_ech · 15.08.2016, 18:26 **[ТС]**

в ID путь? это как? не понял(

@boilzzz · 16.08.2016, 07:32

a4t_ech,
На данный момент у вас путь устанавливается вот так,

JavaScript
1
2
3
4
5
 $('.blast').click(function(){
        $('.thumbs a:not(this)').css('border', '3px solid #fff');
        $(this).css('border', '3px solid blue');
        $('#largeImg').attr('src', 'images/blast-vegas.jpg');
    });

а вас надо вот так:

HTML5
1
<a href="#" class="blast" id='images/blast-vegas.jpg' title="Разрушение Вегаса"><img src='images/thumbs/blast-vegas_thumb.jpg' alt="Разрушение Вегаса"></a>

Подставляете ваш путь в id ссылки, и он будет меняться с помощью js скрипта. То есть путь берется из id ссылки

Добавлено через 9 минут
Вот полный пример. С картинками
песочница

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
42
43
44
45
46
.thumbs{
    margin: 0 20px 0 0;
    
    a{
        border: 3px solid #fff;
        box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.5);
        margin-bottom: 10px;
        height: 200px;
        width: 145px;
        display: inline-block;
        position: relative;
        overflow: hidden;
        
        &:after{
            content: url(../images/zoomin.png);
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            padding-top: 200px/2-32px/2;
            padding-left: 151px/2-32px/2;
            opacity: 0;
            transition:  all .5s ease-in-out;
        }
        &:hover:after{
            opacity: 1;
            background: fade(#000, 60%);
            
        }
        &.active{
            border: 3px solid blue;
        }
        &:hover{
            border: 3px solid blue !important;
        }
    }//a
}//thumbs
 
#img-container{
    img{
        border: 3px solid #fff;
        box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.5);
    }
    
}

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function() {
 
$('.thumbs a').click(function(event){
    $('.thumbs a:not(this)').css('border', '3px solid #fff'); 
    $(event.target).css('border', '3px solid blue');
    $('#largeImg').attr('src', $(event.target).attr('id'));
});
});

HTML5
1
2
3
4
5
6
7
<p class="thumbs left">
        <a href="#" id="http://sf.co.ua/14/03/wallpaper-1431783.jpg" class="active hitman" title="Хитмен-агент"><img  src="http://sf.co.ua/14/03/wallpaper-1431783.jpg" alt="Хитмен-агент"></a>
        <a href="#" id="http://natpost.ru/wp-content/gallery/100photos/033.jpg" class="tenths" title="Девять десятых"><img src="http://natpost.ru/wp-content/gallery/100photos/033.jpg" alt="Девять десятых"></a>
        <a href="#" id="http://333v.ru/uploads/8b/8bb25c8583e9d46c388cca1420e56a7b.jpg" class="gravity" title="Притяжение"><img src="http://333v.ru/uploads/8b/8bb25c8583e9d46c388cca1420e56a7b.jpg" alt="Притяжение"></a>
    </p>
  
    <p id="img-container"><img src="http://sf.co.ua/14/03/wallpaper-1431783.jpg" alt="Hitman" id="largeImg"></p>

Добавлено через 1 минуту
Если будет не понятно то я переделаю ваш код и скажу что вставить) Но лучше если вы сами поймете

Добавлено через 5 часов 59 минут

HTML5
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
<p class="thumbs left">
  <a href="#" id='images/hitman.jpg' class="active hitman" title="Хитмен-агент">
    <img src='images/thumbs/hitman-thumb.jpg' alt="Хитмен-агент"></a>
  <a href="#" id='images/9tenths.jpg' class="tenths" title="Девять десятых">
    <img src='images/thumbs/9tenths-thumb.jpg' alt="Девять десятых"></a>
  <a href="#" id='images/prityazhenie.jpg' class="gravity" title="Притяжение">
    <img src='images/thumbs/prityazhenie_thumb.jpg' alt="Притяжение"></a>
</p>
<p class="thumbs left">
  <a href="#" id='images/22-minutes.jpg' class="minutes22" title="22 минуты">
    <img src='images/thumbs/22-minutes_thumb.jpg' alt="22 минуты"></a>
  <a href="#" id='images/kurier.jpg' class="courier" title="Курьер из рая">
    <img src='images/thumbs/kurier-thumb.jpg' alt="Курьер из рая"></a>
  <a href="#" id='images/unity.jpg' class="unity" title="Единство">
    <img src='images/thumbs/unity-thumb.jpg' alt="Единство"></a>
</p>
<p class="thumbs left">
  <a href="#" id='images/sound-of-music.jpg' class="sound" title="Звуки музыки">
    <img src='images/thumbs/sound-of-music_thumb.jpg' alt="Звуки музыки"></a>
  <a href="#" id='images/star-dust.jpg' class="star-dust" title="Звездная пыль">
    <img src='images/thumbs/star-dust-thumb.jpg' alt="Звездная пыль"></a>
  <a href="#" id='images/blast-vegas.jpg' class="blast" title="Разрушение Вегаса">
    <img src='images/thumbs/blast-vegas_thumb.jpg' alt="Разрушение Вегаса"></a>
 
</p>
<p id="img-container"><img src='images/hitman.jpg' alt="Hitman" id="largeImg"></p>

Вот так должен выглядеть ваш html код, надеюсь понятно)

@a4t_ech · 17.08.2016, 17:28 **[ТС]**

да, понял как только увидел каким должен быть id. раньше не встречал такой записи, спасибо за подсказку.
одна проблема решена - код js сокращен, но ховер так и не работает(
попробовал прописать отдельно событие ховер для .thumbs a но получилось что событие click перестало работать( получается ховер перетер клик или это работает ховер из файла сss?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
    
    $('.thumbs a').click(function(){
        //убираю рамку у всех ссылок кроме этой
        $('.thumbs a:not(this)').css('border', '3px solid #fff'); 
        //добавляю ссылке синию рамку при нажатии
        $(this).css('border', '3px solid blue');
        //меняю путь к большой картинке, чтоб совпадала маленькая и большая 
        $('#largeImg').attr('src', $(event.target).attr('id'));
    });
    
    $('.thumbs a').hover(
    function(){
        $(this).css('border', '3px solid blue');
    },
    fubction(){
        $(this).css('border', '3px solid white');                
    });
    
    
});

@boilzzz · 17.08.2016, 18:58

a4t_ech, я же вам дал работающий css код, там все работает.
https://jsfiddle.net/4wc0k4ag/7/
Переходите и копируете css код, там отличие только в одном я добавил !important в hover.

CSS
1
2
3
&:hover{
            border: 3px solid blue !important;
        }

Перекрывается у вас из-за того что скрипт изменяет стиль не посредственно в html коде а не в css, а у стилей которые прописаны не посредственно прямо в html коде, приоритет выше.

@a4t_ech · 17.08.2016, 21:20 **[ТС]**

понял, спасибо

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@a4t_ech 4 / 4 / 2 Регистрация: 10.08.2015 Сообщений: 162

	Перестал работать hover после события click 14.08.2016, 18:44. Показов 3033. Ответов 7 Метки нет (Все метки) Друзья, помогите разобраться с возникшей проблемой! 1. Есть 9 картинок-ссылок, первой из которых по умолчанию задан класс active(синяя рамка) - рисунок 1; 2. При наведении на любую из картинок ссылок появляется затемнение с иконкой лупы и синяя рамка, при этом выбранная остается с синей рамкой - рисунок 2; 3. При нажатии на наведенную картинку большая меняется и становится как маленькая, при этом за ней закрепляется синяя рамка, а с выбранной до этого рамка убирается - рисунок 3; 4. При наведении на другую картинку у нее должна появляться синяя рамка и затемнение с иконкой лупы. Проблема в том, что 4 пункт выполняется, но без рамки - рисунок 4. И еще...может кто то посоветует как уменьшить js код? Спасибо! Миниатюры 0

@a4t_ech 4 / 4 / 2 Регистрация: 10.08.2015 Сообщений: 162
	15.08.2016, 18:26 [ТС]
	в ID путь? это как? не понял( 0

@a4t_ech 4 / 4 / 2 Регистрация: 10.08.2015 Сообщений: 162
	17.08.2016, 21:20 [ТС]
	понял, спасибо 0

Перестал работать hover после события click

Решение