Перестал работать 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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

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

	Перестал работать hover после события click 14.08.2016, 18:44. Показов 3019. Ответов 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

Решение