Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Почему-то не работает ::after  [new]
Alibek B.
Member

Откуда:
Сообщений: 3014
Есть такой фрагмент HTML:
<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.

Также заданы такие стили:
#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 я вижу.
2 фев 19, 00:28    [21800243]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить