Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
keradan
0 / 0 / 1
Регистрация: 03.10.2014
Сообщений: 12
#1

не срабатывает hover

20.10.2014, 15:52. Просмотров 836. Ответов 3
Метки нет (Все метки)

взял с ресурса http://cssarrowplease.com блок со стрелочкой себе.
Вообще я делаю виджет для корзины. Суть в том, что на екране будет присутствовать маленький блок, при наведении на который должен появлятся блок побольше, со списком товаров в корзине(думаю с айфреймом). Второй блок в фоме такой стрелочки как по ссылке. Короче я приложил к сообщению картинку, там видно как это должно выглядеть.

Раньше я делал такую задачу так:
в сss описаны два класса, изначально у второго блока display:none; при наведении на первый, display второго становится block. таким же макаром выпадающие менюшки делают и т.д. то есть все просто.
НО такой подход у меня не сработал с этой стрелкой.. Я сделал парочку решений на Jquery, но они не очень подходят да и одна короткая строчка css по сравнению с целой функцией джаваскрипта мне как то не дает спокойно смирится с таким решением. Прошу помощи тех, кто знает как и почему hover может не срабатывать(может из-за псевдо-елементов.. я в них не шарю)

Предоставляю код(ничего лишнего, только 2 блока и стили):
HTML5
1
2
3
4
5
6
7
<div class="arrow_box">
    контент
</div>
 
<div id="activate">
    Наведи
</div>
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
.arrow_box {
    position: absolute;
    min-height:100px;
    width:300px;
    background: #35A341;
    padding:5px;
    border:8px solid #9ACD51; 
    top:30px;
    right:240px; 
}
 
.arrow_box:after, .arrow_box:before {
    left: 100%;
    top: 35px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
 
.arrow_box:after {
    border-color: rgba(79, 249, 255, 0);
    border-left-color: #35A341;
    border-width: 15px;
    margin-top: -15px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #98CC50;
    border-width: 26px;
    margin-top: -26px;
}
 
#activate{
    height:100px;
    width:100px;
    border:1px solid;
}
#activate:hover{
    border:1px solid red;
}
#activate:hover .arrow_box{
    display:block!important;
}
Пожалуйста только чистый CSS. Хотя конечно если не существует CSS решения(в чем я сильно сомневаюсь), я приму и джаваскрипт
Заранее огромное спасибо.
0
Миниатюры
не срабатывает hover  
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.10.2014, 15:52
Ответы с готовыми решениями:

Не срабатывает hover
Плохо разбираюсь в CSS подскажите где искать ошибку. При hover'е должно...

Не срабатывает hover
У кого нибудь такое было? Что за бред? .aoa:hover{ border-radius:...

Не срабатывает псевдокласс :hover !
Обьясните деревянному...Почему не срабатывает код? &lt;!DOCTYPE html&gt; &lt;html&gt;...

CSS (hover) отменить действие последнего hover на все элементы
Всем доброго времени суток. У меня следующая загвоздка: нашел скрипт для...

A:hover
Не срабатывает, что делать? /*Цвет ссылки при наведении на неё мышки*/...

3
keradan
0 / 0 / 1
Регистрация: 03.10.2014
Сообщений: 12
20.10.2014, 16:04  [ТС] #2
Пардон, при копировании кода сюда на формум я случайно удалил из класса .arrow_box стиль display:none; Так что считайте он там есть)

Добавлено через 3 минуты
Ну и забыл сказать, при использовании visibility результат такой же..
0
МилокМурлыка
50 / 50 / 15
Регистрация: 25.04.2014
Сообщений: 106
20.10.2014, 17:58 #3
Лучший ответ Сообщение было отмечено keradan как решение

Решение

Цитата Сообщение от keradan Посмотреть сообщение
#activate:hover .arrow_box
это значит, что .arrow_box должен находится внутри #activate
попробуйте так:
HTML5
1
2
3
4
5
6
<div id="activate">
    Наведи
</div>
<div class="arrow_box">
    контент
</div>
CSS
1
2
3
#activate:hover + .arrow_box{
    display:block!important;
}
1
keradan
0 / 0 / 1
Регистрация: 03.10.2014
Сообщений: 12
20.10.2014, 19:17  [ТС] #4
ДА работает.
первый раз увидел плюсик в css )))
Если не секрет что он означает? где можно почитать про это?

Вообще я сделал чуток по другому. Прикол в том что такой вариант как вы посоветовали действительно работает, и правильно все делает, но у меня блоки размещены таким образом, что остаеться достаточно широкое пространство между блоками, и когда курсор выходит из первого - второй изчезает до того как курсор до него доедет. Но идея с вхождением второго дива в первый здесь помогла, я сделал еще один блок (позиционирование relative), им я закрыл промежутки, и всю область на которой я хочу чтобы работало наведение, его же я и спрятал (display:none) и соответственно вместе со стрелкой.

В результате при наведении на первый маленький блок открывается большой прозрачный промежуточный блок(вместе с целевым блоком - стрелкой разумеется), который перекрывает всю пустоту между видимыми блоками, таким образом ничего не изчезает и все работает именно как надо.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.10.2014, 19:17

Hover в IE
В IE hover отображается коряво Как это можно исправить?

Hover
Здравствуйте. Как сделать hover как тут: http://faridos.com/test На верхних...

:hover в IE
Вот такой вопрос: Не работают все стили с псевдоклассом :hover в IE, причём во...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru