Почему-то не работает ::after / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Почему-то не работает ::after

1 сообщений из 1, страница 1 из 1

Почему-то не работает ::after

#39768576

Alibek B

Участник

Сообщения: 3 881

Рейтинг: 0 / 0

Есть такой фрагмент HTML:

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

<div>
  <map name="route-detail">
    <area id="route-detail-01" shape="circle" coords="618,534, 9" href="/img/route/route-01.jpg">
    <area id="route-detail-01" shape="circle" coords="561,561, 9" href="/img/route/route-02.jpg">
    <area shape="circle" coords="517,585, 9" href="/img/route/route-03.jpg">
    <area shape="circle" coords="476,594, 9" href="/img/route/route-04.jpg">
    <area shape="circle" coords="438,568, 9" href="/img/route/route-05.jpg">
    <area shape="circle" coords="409,492, 9" href="/img/route/route-06.jpg">
    <area shape="circle" coords="375,422, 9" href="/img/route/route-07.jpg">
    <area shape="circle" coords="347,340, 9" href="/img/route/route-08.jpg">
    <area shape="circle" coords="286,293, 9" href="/img/route/route-09.jpg">
    <area shape="circle" coords="230,257, 9" href="/img/route/route-10.jpg">
    <area shape="circle" coords="191,261, 9" href="/img/route/route-11.jpg">
    <area shape="circle" coords="151,251, 9" href="/img/route/route-12.jpg">
    <area shape="circle" coords="106,237, 9" href="/img/route/route-13.jpg">
    <area shape="circle" coords=" 64,257, 9" href="/img/route/route-14.jpg">
    <img id="route-detail-bg" usemap="#route-detail" src="/img/route/route-bg.png" width="1080" height="720">
  </map>
</div>

route-bg.png это карта, на которой имеются круглые области (фотографии).
route-xx.png это файлы такой же размерности, что и route-bg.png, только с прозрачным фоном, на котором нарисованы отдельные эдементы (фотографии) с рамкой и подсветкой.
route-xx.jpg — это фотографии крупного размера.
То есть теоретически на карту-подложку (route-bg.png) должны накладываться подсвеченные элементы изображения (route-xx.png), координаты которых заданы в map.
img расположен внутри map и рядом с area для того, чтобы img попадал под действие селектора el1+el2.

Также заданы такие стили:

Код: css

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

#route-detail-bg {
	position: relative;
	display: block;
}
#route-detail-bg::after {
	position: absolute;
	display: block;
	content: "";
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	/*background-image: url(/img/route/route-14.png);*/
	background-position: center;
}
#route-detail-01:hover+#route-detail-bg::after {
	background-image: url(/img/route/route-01.png);
}
#route-detail-02:hover+#route-detail-bg {
	background-image: url(/img/route/route-02.png);
}

Но при наведении курсора на элементы ничего не происходит.
Даже если в ::after вручную задать background-image, я все равно не вижу этого изображения поверх основного.
Но если в img я убираю src, тогда наложенное сверху изображение в пустом img я вижу.

...

Рейтинг:

0 / 0

02.02.2019, 00:28

| Ответить | Цитировать | Написать

1 сообщений из 1, страница 1 из 1

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Почему-то не работает ::after

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&fpage=20&tid=1443887]:	0ms
get settings:	9ms
get forum list:	12ms
check forum access:	4ms
check topic access:	4ms
track hit:	55ms
get topic data:	13ms
get forum data:	3ms
get page messages:	51ms
get tp. blocked users:	2ms
others:	11ms

total:	164ms